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

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

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

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

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

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

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...

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

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. :-)