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.

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

Styling Issues

I'm working on the styling the <div>"wrapper"</div> by using the main.css stylesheet and am not having any luck getting the code to work.

Billy Bellchambers
Billy Bellchambers
21,689 Points

try sharing your code with us using the markdown cheatsheet instructions below.

Or share your workspace using the snapshot workspace icon at top right of your workspace. Once you have created a snapshot copy and pate the snapshot address here so we can help you.

6 Answers

Billy Bellchambers
Billy Bellchambers
21,689 Points

you wrapper is an id dont forget your "#" on id selectors.

Think your css should look like this.

a { 
  text-decoration: none; 
}

#wrapper {   /*----notice the # in front of the id name*/
  max-width: 940px;    /*---- be careful with spaces between values and units too the space you had isn't needed*/
  margin: 0 auto; 
  padding: 0 5%; 
  background:orange ; 
}

Thanks for sharing your workspace youve changed the selector correctly but make sure you delete that space between 940px.

also the other issue I see is the #wrapper itself isnt actually wrapping anything. The div is opened and immediately closed therefore the styles are being applied to a colapsed div due to no content. You need to move the closing wrapper tag to after your content like so.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Michael Friedman | Front-end 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>Michael Friedman</h1>
        <h2>Front-end 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>
    <div id="wrapper">
    <!-- old wrapper closing tag location, see new location below -->
      <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 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>
    </div> <!-- new wrapper closing tag location -->
      <footer> <p>&copy; 2016 Michael Friedman.</p>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
      </footer>

    </body>
    </html>

This should now work

Hey,

I will take a guess at what your problem is. To centre any div you use:

css-selector {
   margin: 0 auto;
}

Regards,

Richard.

thanks. I have done that. I will post my html and css now. I thought it was attached to the problem automatically. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Michael Friedman | Front-end 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>Michael Friedman</h1> <h2>Front-end 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> <div id="wrapper"> </div> <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 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> <p>© 2016 Michael Friedman.</p> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> </footer> </body> </html>

Here is my css

a { text-decoration: none; }

wrapper {

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

I had the # already too but it changed it tobold when i pasted it.

I added a workspace if that helps https://w.trhou.se/jt5xxhrpgh

Billy Bellchambers
Billy Bellchambers
21,689 Points

check my comment under your original post about position of closing div tag on #wrapper

Got it, thanks Billy!