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

Center the wrapper

From the ID Selector video, I have:

a {
  text-decoration: none;
}

which works in removing the underlines, but

#secnfoot {
  max-width: 940px;
  margin: 0 auto; <!-- top, bot; L, R -->
  background: orange;
}

does not do anything. I looked back at index.html which has

<div id="secnfoot">
  <section>

Why isn't the content enclosed by div not acting the way it should?

4 Answers

Wow, I found the problem. LOL. It was the comment syntax! It cancelled out the margin property and everything below.

#secnfoot {
  max-width: 940px;
  margin: 0 auto; /*comment*/
  background: orange;
}

working pen:

http://codepen.io/anon/pen/HlErp

BUT I also want to tell you that your html is also has spaces in the src links. You might want to fix that to prevent your images from not showing up correctly.

Oh my gosh... I thought that the comment syntax was the same for HTML and CSS. Well, there goes 2-3 hours of paranoia. Thanks for all your help!!

Oh wait, one last thing: I titled my images with spaces, so it wasn't originally Page_394, it was just Page 394. Same thing with the name of the containing folder (Locker Postcards, not Locker_Postcards.) My images have been showing up correctly so I was wondering if I should just be wary for the future?

Let's say you take your site online then the links would be broken.

Ah, I see. Thanks for the heads-up.

Bryan Knight
Bryan Knight
34,214 Points

I'm not seeing anything wrong with the syntax is there more to the code that you can provide?

Sure, Here's my index.html:

<!DOCTYPE html>  
<html> 
  <head>  
    <meta charset="utf-8">
    <title>M | M</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head> 

  <body>
    <header>
      <a href="index.html">
        <h1>MM</h1> 
        <h2>La Misteriosa</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="secnfoot">
      <section>
        <ul>
          <li>
            <a href="Locker Postcards/postcard.jpg">
              <img src="Locker Postcards/postcard.jpg" alt="">
              <p>Postcard from last year.</p>
            </a>
          </li>
          <li>
            <a href="Locker Postcards/A True Princess.JPG">
              <img src="Locker Postcards/A True Princess.JPG" alt="">
              <p>My favorite princess.</p>
            </a>
          </li>
          <li>
            <a href="Locker Postcards/Teen Titans.jpg">
              <img src="Locker Postcards/Teen Titans.jpg" alt="">
              <p>4th grade TV show.</p>
            </a>
          </li>
          <li>
            <a href="Locker Postcards/Page 394.JPG">
              <img src="Locker Postcards/Page 394.JPG" alt="">
              <p>Snape at his best.</p>
            </a>
          </li>
          <li>
            <a href="Locker Postcards/Battle the Dark.JPG">
              <img src="Locker Postcards/Battle the Dark.JPG " alt="">
              <p>Battle the dark!</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/mm">
          <img src="img/twitter.png " alt="Twitter logo">
        </a>
        <a href="https://www.facebook.com/mm">
          <img src="img/facebook.png " alt="Facebook logo">
        </a>
        <a href="contact.html">
          <img src="img/phone.png " alt="Phone number">
        </a>
        <a href="contact.html">
          <img src="img/mail.png " alt="Email address">
        </a>
        <p>&copy; 2014 M&M.</p>
      </footer>
    </div>
  </body>
</html> 

And here is my main.css:

a {
  text-decoration: none;
}

<!-- selects the div we tagged -->

#secnfoot {
  max-width: 940px;
  margin: 0 auto; <!-- top, bot; L, R -->
  background: orange;
}

You're setting a max-width but you haven't set a default width on #secnfoot.

Hmm... that doesn't work, though. I tried playing around with the numbers and I'm still not getting it...

Your body also needs a height. I'll write some code for you to show you a general set-up then you could build on that. Gimme a sec.

I'm afraid I lost you. I don't understand why I need to add the extra stuff like height; I was just following Nick's tutorial at http://teamtreehouse.com/library/how-to-make-a-website/css-cascading-style-sheets/center-the-wrapper and I can't figure out why, when closely following his steps, I can't see the same results...

I didn't realize you were following the video. I'll take a look at your code again.

Bryan Knight
Bryan Knight
34,214 Points

Yes so you can set a default width on the body or html tag of a larger size than the max width and you'll see it happen.