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

Posted by gabriels
gabriels
30 Points

The margin property won't work for me?

I just want the white space to be gone from my class thats named top and my nav element. But when I put the margin to 0 nothing changed.

Html Code

<!doctype html!> <html>

    <head>
        <title> Sample website </title> 

        <link rel="stylesheet" href="css/main.css">

    </head>



    <body>

        <header> 

            <div id="top">
            <h1> Sample website </h1>
            <h2> Just starting up </h2>
            </div>


            <nav>
                <ul>
                <li> Home </li>
                </ul>

                <ul>
                <li> Join  </li>
                </ul>

                <ul>
                <li> Log in </li>
                </ul>

                <ul>
                <li> Sign up </li>
                </ul>



            </nav>


        </header>



    </body>


</html>

CSS code

top {

    background-color:lightgray;
    margin:0;
    color: white;
    text-align:left;

}

nav { background:lightgray; margin: 0; color:white; }

body{ background-color: white; }

4 Answers

Justin LeFurjah
Justin LeFurjah
12,347 Points
Justin LeFurjah
Justin LeFurjah
12,347 Points

It is easier to help with stuff like this if you put it in a codepen (http://codepen.io/) or something similar.

Chris Jardine
Chris Jardine
13,299 Points
Chris Jardine
Chris Jardine
13,299 Points

It should work if you add to your CSS:

ul{margin: 0;}

h2 {margin:0;}

joshwisdom
joshwisdom
1,690 Points
joshwisdom
joshwisdom
1,690 Points

Change this in your css. When you give an element an id like top, you have to use a # because it is a selector

#top { 
    background-color:lightgray;
    margin:0;
    color: white;
    text-align:left;
}

You can wipe all margins on the page with this rule. This will work if you don't want any margins at all. I wouldn't really recommend this one unless you just don't want any margins at all.

* {margin: 0;}

If you wanted no margins in the navigation ul element, you could do this.

nav ul {margin: 0;}

The same can be done for you headers

h1 {margin: 0;}
h2 {margin: 0;}
Charlie Holmes
Charlie Holmes
12,601 Points
Charlie Holmes
Charlie Holmes
12,601 Points

You said above this is a class, not an id. If it is a class, it needs to have a period in front of it, instead of the # suggested above.

.top { background-color: lightgray; margin: 0; color: white; text-align: left; }

also the default for text-align is left, so you might not need that property and value.