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

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

Leonardo Cavalcanti
Leonardo Cavalcanti
5,308 Points
Posted by Leonardo Cavalcanti
Leonardo Cavalcanti
5,308 Points

Wrapper not changing the color of the background

My main.css is properly working, as well as my normalize.css.. for some reason the wrapper wont make any alterations to the page... can anybody help thanks

main.css file bellow;

Heres the HTML code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Leo | Web Developer </title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1> The monstrosity </h1> <h2> is here</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/anime3.jpg"> <img src="img/anime3.jpg" alt=""> <p> Weird eye </p> </a> </li> <li> <a href="img/warcraft2.jpg"> <img src="img/warcraft2.jpg" alt=""> <p>A deathknight has cold bold, literally</p> </a> </li> <li> <a href="img/anime4.jpg"> <img src="img/anime4.jpg" alt=""> <p>BLUE FREAKING HAIR</p> </a> </li> <li> <a href="img/warcraft1.jpg"> <img src="img/warcraft1.jpg" alt=""> <p>My blade be thirsty</p> </a> </li> <li> <a href="img/warcraft3.jpg"> <img src="img/warcraft3.jpg" alt=""> <p>Woof woof</p> </a> </li> </ul> <p> This site is under construction</p> </section> <footer> <a href="https://twitter.com/leonardomisfits"> <img src="img/twitter-wrap.png" alt "Twitter logo"> </a> <a href="https://www.facebook.com/an4rhy"> <img src="img/facebook-wrap.png" alt "Facebook logo"></a> <p>Ā©2015 The Bad Mother Fucker</p> </footer> </body> </html>

and heres the link to the page http://port-80-69rt2glvri.treehouse-app.com/

Leonardo Cavalcanti
Leonardo Cavalcanti
5,308 Points
Leonardo Cavalcanti
Leonardo Cavalcanti
5,308 Points

The main.css code is not displayed properly, so here it is again.

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  background: orange;
}

3 Answers

Craig Watson
Craig Watson
27,930 Points

Hi Leo,

It seems you have not given any HTML element the ID wrapper :) so there is nothing for the #wrapper css selector to select :)

Craig

Leonardo Cavalcanti
Leonardo Cavalcanti
5,308 Points
Leonardo Cavalcanti
Leonardo Cavalcanti
5,308 Points

Yeah I missed the ID atribute...

rtholen
PLUS
rtholen
Courses Plus Student 11,859 Points
rtholen
rtholen
Courses Plus Student 11,859 Points

If this is the entire html contents, I don't see any tag (like a div or section) that has the wrapper id associated with it. You need to add something like :

<div id="wrapper">
<!-- the html you want wrapped-->
</div>