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 Style the Basic Elements

gregory fenwick
gregory fenwick
7,569 Points
Posted by gregory fenwick
gregory fenwick
7,569 Points

Having problems understanding the center margin - task div wrapper center. margin:0 center;

Hi how are you?

Just trying to understand the margin centering rules in CSS.

wrapper{ max-width:940px; margin:0 center; }

Not sure about the correct layout here.

Thanks,

css/main.css 
a {
  text-decoration:none;
 }
wrapper {
  max-width:940px;
  margin:0 center;
  {
index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">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 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>
        <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>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>

2 Answers

Miroslav Kovac
Miroslav Kovac
11,440 Points
Miroslav Kovac
Miroslav Kovac
11,440 Points

replace your 'center' keyword with 'auto'. ('center' is not usable for margin property)

'auto' will automatically calculate your margins for left and right here. And the margin will be same on both sides. The effect is that the #wrapper will be horizontaly centered then.

margin: 0 auto;

gregory fenwick
gregory fenwick
7,569 Points
gregory fenwick
gregory fenwick
7,569 Points

Thanks very much for your feedback. Slowly coming together.

Andreas Anastasiades
Andreas Anastasiades
2,916 Points
Andreas Anastasiades
Andreas Anastasiades
2,916 Points

Also your last bracket is in the wrong direction.

Adapt your code as such

wrapper {
  max-width: 940px;
  margin: 0 auto;
  }
gregory fenwick
gregory fenwick
7,569 Points
gregory fenwick
gregory fenwick
7,569 Points

Thanks for your advice. Will take on board.