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 am working on module Center the Wrapper and my background color will not change. main.css is reference correctly

index html ref: <link rel="stylesheet" href="css/main.css">

main.css

a{ text-decoration: none; }

wrapper {

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

7 Answers

Sam Baines
Sam Baines
4,315 Points

Hi Kevin - you can post your code completely using three back ticks (```) either side of the code for it display properly. Are you sure you have the # sign for the wrapper ID in your css and is the id specified in the html for the wrapper div?

Here is the code. I checked again on the index.html to see if I left anything open. main.css and index.html code below

Thanks for taking a look

  text-decoration: none;
}

#wrapper {

  background: orange;
}

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Materials Management|Operational Report Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Kevin Zandee</h1> <h2>Materials Management/Operational Report Developer</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> <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 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 brushes.</p>
        </a>
       </li>

      <li>
        <a href="Img/numbers-12.jpg">
        <img src="Img/numbers-12.jpg" alt="">
        <p>Creating shapes using repetiton.</p>
        </a>             
       </li>



    </ul>
  </section>
  <footer>
<a href="http://www.twitter.com/Kevin04801578"><img src="Img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="https://www.linkedin.com/pub/kevin-zandee/19/a22/512/en"><img src="Img/Linkedin-wrap.png" alt="LinkedIn Logo"></a>

    <p>&copy; 2010 Kevin Zandee.</p>
  </footer>
</body>

</html>

''' a{ text-decoration: none; }

wrapper {

background: orange; }

a{
  text-decoration: none;
}

#wrapper {

  background: orange;
}
Sam Baines
Sam Baines
4,315 Points

Hi Kevin - I have noticed one thing that might affect the code you have for the css - it looks like you have forgot to close the html <head> tag in the top of the code just before the body tag. Maybe check that to see if it as result has not been parsing the main.css file correctly.

thanks got it working

You don't have any of the <div></div> in your code.