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

HTML How to Make a Website CSS: Cascading Style Sheets Center the Wrapper

hee chung
hee chung
3,530 Points
Posted by hee chung
hee chung
3,530 Points

did not centered the div after the following the steps.

I followed the steps but the pictures were not centered on the page. I used the foxfire and chrome, but it did not work. Please help me to find the problems. Thank you.

The index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charse="utf-8">
    <title>Steve Chung | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <style>
      nav a {
        color: white;
        background-color: orange;
      }

    </style>
  </head>
  <body>
    <header>
      <a href="index.html">
      <h1>Steve Chung</h1>
      <h2>Designer</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="wrapper">
      <section>
        <ul>
          <li>
            <a href="images/numbers-01.jpg">
              <img src="images/numbers-01.jpg" alt="">
              <p>Experimentation with color and textures.</p>
            </a>
          </li>
            <li>
            <a href="images/numbers-02.jpg">
              <img src="images/numbers-02.jpg" alt="">
              <p>Playing with the blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="images/numbers-06.jpg">
              <img src="images/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="images/numbers-09.jpg">
              <img src="images/numbers-09.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
          <li>
            <a href="images/numbers-12.jpg">
              <img src="images/numbers-12.jpg" alt="">
              <p>Experimentation with color and textures.</p>
            </a>
          </li>    

        </ul>
      </section>
      <footer>
        <a href="http://twitter.com"><img src="images/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com"><img src="images/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Steve Chung.</p>
      </footer>
    </div>
  </body>
</html>

main.css

a {
 text-decoration: none; 
}
 #wrapper {
  max-width: 940px;
  margin: 0 auto; 
  background-color: green;
}

5 Answers

Joe Hartman
Joe Hartman
20,881 Points

Doesn't look like your wrapper div is closed correctly. Since you opened it right before the section tag you'd want to close it right after the closing section tag. Looks like the closing div for the wrapper is after the closing footer tag.

hee chung
hee chung
3,530 Points
hee chung
hee chung
3,530 Points

Thank you very much Joe.

That worked.

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Hi Hee! You seem to have your "wrapper" div around everything except your header... I don't know if that's what is causing your problem but you could start fixin' that. Also if you want to you could fork your workspace and paste it in here so we can check it out.

Hope you find my answer useful!

Cheers and Keep Coding!

hee chung
hee chung
3,530 Points
hee chung
hee chung
3,530 Points

Thank you for your response.

The background-color: green worked but the rest did not work. I don't know what the problem is.

Thank you.

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Your HTML looks fine, and works if I put it in my own Workspace. Make sure your main.css and normalize.css files are in the css folder, and the index.html file is outside of it:

|
|_ index.html
|
|_ css
      |_ main.css
      |_ normalize.css
hee chung
hee chung
3,530 Points
hee chung
hee chung
3,530 Points

thank you,

but the files are in the right folder.