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
Gavin Ross
4,401 PointsCenter The wrapper (not in the center)
I don't get why it is not exactly in the middle of the page
10 Answers
Zahscha Gonzalez
27,775 PointsIf that is exactly how your code looks like you are missing the # at the beginning of the wrapper if should be:
#wrapper{
max-width:940px;
margin: 0 auto;
}
Gavin Ross
4,401 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit</title> <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="numbers picture"> <p>bunch of bollocks about a segull</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt="numbers picture"> <p>bunch of bollocks about a anis</p> </a> </li> </ul> </section> <footer> <p>© 2013 Nick Pettit.</p> </footer> </div> </body> </html>
CSS CODE
a { text-decoration: none; }
wrapper {
max-width: 940px; margin: 0 auto; }
James Lucia
7,350 PointsCan you show us your code?
Mark Edwards
Courses Plus Student 5,830 PointsBe sure you have the value - margin: 0 auto;
Gavin Ross
4,401 PointsI've definitely got the exact same code as in the video, my issue is that his image as well, is not in the center of the page
Mark Edwards
Courses Plus Student 5,830 PointsI see your problem you are not selecting the id the code you are showing us does not have a # sign it should be #wrapper and not wrapper
Gavin Ross
4,401 PointsI wrote that part quickly, the actual code has the # in it
Gavin Ross
4,401 PointsI should try and explain more clearly. The whole page seems to be a bit to the right leaving room for something at the side. But i can't see much code for that. Is it the <nav> part of the code
Zahscha Gonzalez
27,775 PointsWhat about your html I have had problems with alignment before and it's just because I forgot a closing tag or something is misspelled. Even though you haven't gotten to that part I would recommend you checking out html validation tools and see if its valid
Html validator http://validator.w3.org
css validator
http://jigsaw.w3.org/css-validator/
Hopes this helps!
Andrew Helton
4,681 PointsHi Gavin,
The reason things are not centered is because you need to 'reset' your ul and li styles. By default, ul and li items have some margin/padding applied. Please insert this css into your file:
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
You might also want to set your images to only fill 100% of their parent container (in this case the wrapper). You can do this by using this css:
img {
max-width: 100%;
}
This should resolve your problem.
Gavin Ross
4,401 PointsHey andrew thanks for the help that was good info. But I should also mention, coz I think this was the main problem. I hadn't loaded the normalize document. <link rel="stylesheet" href="css/normalize.css">
So there was a weird border round the whole sight I could't get rid of till i did that.
thanks everyone for the support