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 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,454 Points
Miroslav Kovac
Miroslav Kovac
11,454 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.