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

Posted by Hannah Teicher
Hannah Teicher
703 Points

what code can i use in order to make sure the there is no white space above the nav bar in my header?

html

</head> <body> <header> <ul> <li>Hannah Teicher</li> <li id="portfolionav">Portfolio</li> </ul> </header>
<section>

css header { background-color: black; float: left; margin-top: 0; padding: 0; width: 100%; }

Hannah Teicher
Hannah Teicher
703 Points

i obviously know the html needs closing tags and such.. i just copied and pasted the part that applies

1 Answer

andren
andren
28,558 Points
andren
andren
28,558 Points

The space comes from the fact that the body has a margin (on all sides) of 8 as a browser default (at least on Chrome). You can fix that by setting the margin to 0 like this:

body {
    margin: 0;
}

It is worth mentioning that if you are using Chrome you can use Chrome's dev tools to easily figure out what margin and padding the various elements on your page has, it is quite useful when trying to figure out why an element is not placed where you expect it to be.

You can access the dev tools by simply right-clicking on the page and selecting the "Inspect" option. It should open in on the "Elements" tab where you can simply highlight an element in your page to see it's margin and padding outlined in different colors. It will also list lots of other style info about the selected element below the list of elements.