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

Cannot center wrapper and cannot make background orange...

Please help! I have done exactly what was done in the video!

index.html 
<!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>
main.css 
a { text-decoration: none; }
wrapper { max-width: 940px; margin: 0 auto; background: orange; }

3 Answers

Daniel Johnson
Daniel Johnson
104,132 Points
Daniel Johnson
Daniel Johnson
104,132 Points

You were just missing the hashtag (#) at the beginning of wrapper in your CSS. Also make sure you don't put the spaces around the equals signs in your HTML.

main.css 
a {
    text-decoration: none;
}
#wrapper {
    max-width: 940px;
    margin: 0 auto;
    background: orange;
}
Stephen Poole
Stephen Poole
9,361 Points
Stephen Poole
Stephen Poole
9,361 Points

Hey Daniel, thanks for the response. I actually do have the hashtag in my code though, it just didn't seem to show up when I copy and pasted the code for this question. So my code still isn't working for some reason... Any idea what else it might be? Thanks for the advice about the spacing though I'll definitely fix that!

Daniel Johnson
Daniel Johnson
104,132 Points
Daniel Johnson
Daniel Johnson
104,132 Points

Double check that you have your CSS files in the correct place and that your paths are correct. You could also give this code a try. The CSS is included directly in the HTML.

index.html 
<!doctype html>
<html>
<head>

    <meta charset="utf-8" />
    <title>Stephen Poole | EE Intern</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" />

    <style>
    a {
        text-decoration: none;
    }
    #wrapper {
        max-width: 940px;
        margin: 0 auto;
        background: orange;
    }
    </style>

</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>
Stephen Poole
Stephen Poole
9,361 Points
Stephen Poole
Stephen Poole
9,361 Points

Awesome, thanks Daniel, much appreciated. I'll give that a shot for sure.

Thi Dinh La
Thi Dinh La
9,274 Points
Thi Dinh La
Thi Dinh La
9,274 Points

Hello! I'm experiencing the exact same problem with the external main.css link's inability to apply the CSS to the index.html. I followed the video with the Workspace, viewed video many times and nothing changes the #wrapper id. The relative path is correct. It's only when I took Daniel's (above) advice to move from main.css code to the index.html that I could see the orange background! That's so strange...

kellycurtis
kellycurtis
3,716 Points
kellycurtis
kellycurtis
3,716 Points

I had this exact same problem and including the CSS element in HTML is the only way it would work.

Kaela J Curtis
Kaela J Curtis
308 Points

Actually I jumped the gun and it isn't working. Just going to shutdown and restart and pray that fixes the problem. It's late and I'm tired. :-)