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 Center the Wrapper

Posted by mm4
mm4
8,600 Points

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

David Tonge
David Tonge
Courses Plus Student 45,640 Points

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.

mm4
mm4
8,600 Points

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?

David Tonge
David Tonge
Courses Plus Student 45,640 Points

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

mm4
mm4
8,600 Points

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

Bryan Knight
Bryan Knight
34,215 Points
Bryan Knight
Bryan Knight
34,215 Points

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

mm4
mm4
8,600 Points

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;
}
David Tonge
PLUS
David Tonge
Courses Plus Student 45,640 Points
David Tonge
David Tonge
Courses Plus Student 45,640 Points

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

mm4
mm4
8,600 Points

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

David Tonge
David Tonge
Courses Plus Student 45,640 Points

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.

mm4
mm4
8,600 Points

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...

David Tonge
David Tonge
Courses Plus Student 45,640 Points

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

Bryan Knight
Bryan Knight
34,215 Points
Bryan Knight
Bryan Knight
34,215 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.