Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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


I cant seem to get the wrapper to center the jpg's even so when i go to colour the wrapper it doesn't work and stays white(if there at all). I have copied the codes perfectly and i just can't figure out why the wrapper isnt showing up. At first i thought that i had marked the "div" wrong but not so, secondly i thought there was a problem in syntax but also not the case! help!

Are you able to post your html and css so that we can have a look ? Have a look at the 'tips for asking questions' video and the 'markdown cheatsheet' if you're not sure how.

3 Answers

You are missing the ; after the max-width: 940px

i added the ; after the max-width 940px but still have the same problem both with the color of the wrapper and the centering

    its almost as if index.html is not reading the main.css file at all. 

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

is this correct?

Yeah seeing your code would be helpful. I know from previous tutorials online a good rule of thumb when centering images is to make sure that it has a width (which images it will be the actual size of the image so you won't have to really do anything unless you wanted to resize the images to a specific size), it needs to be block level element, and margin: 0 auto; should work.

sorry about the length didn't know how else to do it, and thanks for the help. =)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jack Hatton | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Jack Hatton</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Protfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id"001"> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt""> <p>The number one.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt""> <p>The number two.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt""> <p>The number six.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt""> <p>The number nine.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt""> <p>The number tweleve.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com"> <img src="img/twitter-wrap.png" alt"twitterlogo"> </a> <a href="http://facebook.com"> <img src="img/facebook-wrap.png" alt"facebooklogo"> </a>
<p>© 2014 Jack Hatton</p> </footer> </div> </body>

then my main css is:

a { text-decoration: none; }

wrapper {

max-width: 940px margin: 0 auto; background-color: orange; }