Center the margins on the page and check the values of the margins.

Question

css/main.css

a{

  text-decoration:none;
  max-width:940pix;
}

#"wrapper"{text-align: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>

Answer 1 · 2016-06-08T01:36:04Z

June 8, 2016 1:36am

It looks like you missed my answer to your previous question.

But to recap, here's a few hints:

you put your "max-width" setting in the links (a) rule, it should be in the #wrapper rule
the abbreviation for "pixel" is "px" (not "pix")
the challenge hasn't asked for a "text-align" setting (yet - have you done this before?)
the margin value that centers elements is "auto"

Also, since last time it seems you added quotes around the id name wrapper - but you had that right the first time.

Answer 2 · 2016-06-08T01:30:06Z

June 8, 2016 1:30am

Hi, there´s a few issues with the css syntax, you must use pixels= px instead of "pix" and when you use an id selector the correct way to write is #selector ....

It will be:

a {
    text-decoration: none;
    max-width: 940px;
}

#wrapper {
    text-align: center;
}

Moderator Edited: 1) Moved response from Comment to Answer. 2) Added Markdown to code to make it readable in the Community.

Welcome to the Treehouse Community

Looking to learn something new?

sean farrelly

sean farrelly

Center the margins on the page and check the values of the margins.

2 Answers

Steven Parker

Steven Parker

Jorge Berbena

Jorge Berbena