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

Li Chang
Li Chang
11,883 Points
Posted by Li Chang
Li Chang
11,883 Points

Why my page doesn't goes to center?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Z | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Z</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="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 creat 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>
      </div>
  <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 Z.</p>
  </footer>

</body>
</html>

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Li,

Are you missing the # in front of wrapper in your css? It should be #wrapper {

Li Chang
Li Chang
11,883 Points
Li Chang
Li Chang
11,883 Points

Thank you, Jason

It is my browser's problem. I just switch my browser to Firefox and found the page is already centered.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

What browser were you using before? That css shouldn't have caused any of the current browsers any trouble.

Could it have possibly been a case of not saving the css file or not refreshing the page after adding in that css?

Li Chang
Li Chang
11,883 Points
Li Chang
Li Chang
11,883 Points

I tried to refresh page many time and I am very sure that I save the file before refresh the page.

I was use IE11.

Li Chang
Li Chang
11,883 Points
Li Chang
Li Chang
11,883 Points

==========css=======

a { text-decoration: none;

}

wrapper {

max-width: 940px; margin: 0 auto; }