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
Shayna Adler
2,203 Pointsnot centering
Why is not centering?
HTML FILE:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Nick Pettit</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul> <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.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter logo"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook logo"></a> <p>Ā© 2014 Nick Pettit.</p> </footer> </div> </body> </html>
CSS FILE:
a { text-decoration: none; }
wrapper {
max-width: 940px; margin:0 auto; }
6 Answers
Matthew DeAngelo
2,948 PointsIt looks like you forgot to specify that your selector "wrapper" is an ID selector instead of a class selector. In your CSS code, add a # before wrapper:
wrapper {
max-width: 940px; margin: 0 auto; }
Shayna Adler
2,203 PointsI did put a # before wrapper, it just didn't come up when I copied and pasted it.
Antonio Jaramillo
15,604 PointsThis might be a silly question, but did you remember to save your files before refreshing your browser?
Shayna Adler
2,203 PointsYes, I continued on in the video and other parts have worked.
Antonio Jaramillo
15,604 PointsI noticed that you don't have a body tag. Try adding that into your HTML.
Shayna Adler
2,203 PointsI have a body tag. It didn't show up when I pasted it. Here's my html and css files again:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Nick Pettit</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul>
<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.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter logo"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>
<p>Ā© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
a { text-decoration: none; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
logo {
text-align: center; margin: 0; }
Shayna Adler
2,203 PointsIt didn't come up again when I pasted it.
Antonio Jaramillo
15,604 PointsOkay. Do you have a pound sign before wrapper in your CSS code, as in #wrapper?
Shayna Adler
2,203 Pointsyes
Shayna Adler
2,203 Pointsyes
Antonio Jaramillo
15,604 PointsAww, yes. I just noticed that you mentioned that above. I tried your code and it works for me. I, of course, added pound signs before your two ids and embedded your HTML inside html and body tags. I'm stumped as to why it didn't work for you...
Shayna Adler
2,203 PointsOkay, thanks for your help. Knowing that it works makes me feel better. I'll try restarting the program later and see if it helps.
Shayna Adler
2,203 PointsShayna Adler
2,203 PointsI did put a # before wrapper, it just didn't come up when I copied and pasted it.