Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website CSS: Cascading Style Sheets Center the Wrapper

Matthew Goldwater
Matthew Goldwater
3,859 Points
Posted by Matthew Goldwater
Matthew Goldwater
3,859 Points

Code Won't Center (50 seconds into lecture)

When previewing the page my code won't go to the center

Here is Lines 5-8 my main.css file

css #wrapper { max-width: 940px; margin: 0 auto; }

In index.html I have correctly spelled wrapper and closed the div element. I also definitely saved my code in both index.html and main.css.

Where could I be messing up?

I'd appreciate any help.

Here's all my code.

main.css

 a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto; 
}

index.html (this file won't paste correctly for some reason. the 1st 3 lines are <!DOCTYPE html> <html> <head>0)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Matt Goldwater | Web Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Matt Goldwater</h1> <h2>Web Developer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio </a></li> <li><a href="about.html">About</a></li> <li><a href="content.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repitition.</p> </a> </li> </section> <footer> <a href="https://twitter.com/MJGwater"> <img src="img/twitter-wrap.png" alt="Twitter Logo"> </a> <a href="https://www.facebook.com/mgoldwater"> <img src="img/facebook-wrap.png" alt="Facebook Logo"> </a> <p>Ā© 2015 Matt Goldwater.</p> </footer> </div> </body> </html>

Sean Do
Sean Do
11,933 Points
Sean Do
Sean Do
11,933 Points

Can you copy & paste both .html and css files here?

Matthew Goldwater
Matthew Goldwater
3,859 Points
Matthew Goldwater
Matthew Goldwater
3,859 Points

Added my code Sean. Thanks for trying to help.

Sean Do
Sean Do
11,933 Points
Sean Do
Sean Do
11,933 Points

Are you working in Workspace? You may need to hard refresh your Workspace tab, because it seems to be working on my end.

2 Answers

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

Matthew,

Your code is working as intended. If you're expecting the contents of the sections to be centered (list items and images), you must use text-align: center; to achieve those results.

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  border: 3px solid;
  text-align: center;
}

Hope this helps!

-Rich

Matthew Goldwater
Matthew Goldwater
3,859 Points
Matthew Goldwater
Matthew Goldwater
3,859 Points

Thanks for the quick feedback everyone. It worked immediately the next time I came back on the internet. I'm not exactly sure what was wrong before.