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

gregory gordon
seal-mask
.a{fill-rule:evenodd;}techdegree
gregory gordon
Full Stack JavaScript Techdegree Student 14,652 Points

im haveing two problems i still have bulletpoints and my page is not aligning.

my page still has bullet points on <ul> items and page does not move to center.

Grace Kelly
Grace Kelly
33,990 Points

Hi Gregory, could you post your code here so we can see it??

13 Answers

Grace Kelly
Grace Kelly
33,990 Points

to remove the bullet points in your list, you need to remove the list styling like so:

ul {
list-style:none;
}
Grace Kelly
Grace Kelly
33,990 Points

First off, you have spelled auto wrong in your margin, try changing it to :

margin: 0 auto;

Could you please post your source code?

gregory gordon
seal-mask
.a{fill-rule:evenodd;}techdegree
gregory gordon
Full Stack JavaScript Techdegree Student 14,652 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Greg Gordon | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Greg Gordon</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 create a 80s style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips useing photoshop bruches.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes useing 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 Greg Gordon.</p>
  </footer>
  </div>

</body> </html>

Bottom of this page is "Markdown Cheatsheet" where you can find instructions how to post code on the forums.

I would link it in my answer but I'm not sure how it's done.

Grace Kelly
Grace Kelly
33,990 Points

don't worry, we've all made the same kind of mistakes!!

I see that Grace helped you already.

Don't worry about typos it maybe the first time not the last :)

It's going to be something you learn to check first when things don't work.

Happy coding and have fun learning!

Grace Kelly
Grace Kelly
33,990 Points

no problem glad to help! :)

And Gregory,

remember to up vote Grace's helpful answers.

Grace Kelly
Grace Kelly
33,990 Points

haha thanks tuukka :)

Daniel Hildreth
Daniel Hildreth
16,170 Points

I am also having this issue, but I can't figure out why. I spelled it all correctly it looks like in my style.css file. This is what my style.css page looks like:

a { text-decoration: none; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; background: orange; }

This is what my index.html file looks like:

<!DOCTYPE html> ''' <html> <head> <meta charset="utf-8"> <title>Daniel Hildreth | Web Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <a href="index.html"> <h1>Daniel Hildreth</h1> <h2>Web 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 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="https://www.facebook.com/daniel.hildreth.35"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2014 Daniel Hildreth</p> </footer> </div> </body> </html> '''

There is

html> head>

before the

meta charset="utf-8">

and yes, they have the < in front of them just wasn't sure how to post that part of the code.

There is also a < before the following as well at the end of the html code.

/div>

/body>

/html>

So does anyone know why my pictures are still bulleted and not aligned properly?

Sébastien Louyot
Sébastien Louyot
3,080 Points

Daniel,

In your CSS file, you wrongly named your wrapper selector: use #wrapper instead of wrapper.

The '#' indicates it's a div element.

Hope this helps!

Daniel Hildreth
Daniel Hildreth
16,170 Points

I did have #wrapper in the CSS file it just didn't paste right when I entered the code. Didn't realize that till you mentioned it, but yes the #wrapper is in the file.

Sébastien Louyot
Sébastien Louyot
3,080 Points

Daniel,

Don't know if this a pasting issue, but I don't see a closing header element, neither a div named wrapper before your opening section element.

And don't forget to close that div ;-)