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

Posted by anthonyhatton
anthonyhatton
504 Points

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!

bothxp
bothxp
16,510 Points

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

bothxp
bothxp
16,510 Points
bothxp
bothxp
16,510 Points

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

anthonyhatton
anthonyhatton
504 Points

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

anthonyhatton
anthonyhatton
504 Points 
    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?

Veronica Rivera
Veronica Rivera
32,599 Points
Veronica Rivera
Veronica Rivera
32,599 Points

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.

anthonyhatton
anthonyhatton
504 Points
anthonyhatton
anthonyhatton
504 Points

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; }