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

Gavin Ross
Gavin Ross
4,401 Points

Center The wrapper (not in the center)

I don't get why it is not exactly in the middle of the page

10 Answers

If 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
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
James Lucia
7,350 Points

Can you show us your code?

Be sure you have the value - margin: 0 auto;

Gavin Ross
Gavin Ross
4,401 Points

I'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

I 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
Gavin Ross
4,401 Points

I wrote that part quickly, the actual code has the # in it

Gavin Ross
Gavin Ross
4,401 Points

I 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

What 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
Andrew Helton
4,681 Points

Hi 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
Gavin Ross
4,401 Points

Hey 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