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 trialMatthew Goldwater
3,859 PointsCode 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>
Matthew Goldwater
3,859 PointsAdded my code Sean. Thanks for trying to help.
Sean Do
11,933 PointsAre 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
Treehouse Moderator 27,696 PointsMatthew,
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
3,859 PointsThanks 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.
Sean Do
11,933 PointsSean Do
11,933 PointsCan you copy & paste both .html and css files here?