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

Stephen Poole
Stephen Poole
9,361 Points
Posted by Stephen Poole
Stephen Poole
9,361 Points

Last video went fine, but nothing in this video works. I cannot center the images and can't make background orange...

Here is my code for the index.html file:

<!DOCTYPE html> <html>

<head> <meta charset="utf-8"> <title>Stephen Poole | EE Intern</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body>

<header> 
  <a href="index.html">
    <h1>Stephen Poole</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 = ""> <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.</p>
        </a>
      </li>

      <li>
        <a href="img/numbers-06.jpg">
          <img src = "img/numbers-06.jpg" alt = "">
          <p>Trying to create an 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 repetition.</p>
        </a>
      </li>        
    </ul>
  </section>
  <footer>
    <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
    <a href = "http://facebook.com/stephenpoole"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>

    <p>&copy; 2014 Stephen Poole</p>
  </footer>
</div>

</body> </html>

And here is the code for the main.css file:

a { text-decoration: none; }

wrapper {

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

Thomas K
Thomas K
11,565 Points

Is wrapper suppose to be a class? Try adding class="wrapper" in the element you want to change.

Then change the css to this. Make sure you always use a dot to identify classes in css. 

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

2 Answers

Tommy Bregar
Tommy Bregar
10,847 Points
Tommy Bregar
Tommy Bregar
10,847 Points

Hi Stephen, in the videos "wrapper" is the ID of the div element which surrounds the page from just before the section element all the way to just after the closing footer tag.

Your HTML is missing the opening div id="wrapper" tag, it should look like this:

<!DOCTYPE html>

<meta charset="utf-8">
<title>Stephen Poole | EE Intern</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">



<header> 
  <a href="index.html">
    <h1>Stephen Poole</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 = "">
          <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.</p>
        </a>
      </li>

      <li>
        <a href="img/numbers-06.jpg">
          <img src = "img/numbers-06.jpg" alt = "">
          <p>Trying to create an 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 repetition.</p>
        </a>
      </li>        
    </ul>
  </section>
  <footer>
    <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
    <a href = "http://facebook.com/stephenpoole"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>

    <p>&copy; 2014 Stephen Poole</p>
  </footer>
</div>

And your CSS is missing the '#' before your wrapper code. It should look like this:

a { text-decoration: none; }

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

That should get you taken care of :)

Stephen Poole
Stephen Poole
9,361 Points
Stephen Poole
Stephen Poole
9,361 Points

Hey Tommy! Thanks so much for the reply. Unfortunately it is still not working though :( I fixed everything to be the same syntax and all that you suggested but something still isn't coming together. I've looked through the code at least a dozen times and everything is identical to how they did it in the video... Do you have any other suggestions?

Tommy Bregar
Tommy Bregar
10,847 Points

Hi Stephen, I just noticed that my original answer was not displaying correctly...I've edited it, and it is now. So be sure you have that opening div tag just above your opening section tag to look like:

<div id="wrapper">

If that's not still an issue, check these couple things:

  1. CSS file reads "#wrapper" as opposed to "wrapper".
  2. Correct path to your CSS file.
  3. Remove spaces between equal signs and attribute values. I see a couple in there...check your img elements and your Facebook link in footer. If the issue is in your own web browser, this probably is not the cause, but if this code is part of a challenge it may be - TH challenges can be hyper critical when checking your answers.

If anything else occurs to me I'll let you know!

Moe Terani
Moe Terani
9,158 Points
Moe Terani
Moe Terani
9,158 Points

I had the same problem as Stephan but thanks to Tommy is now solved. It will be appreciated if someone address the issue.