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 How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Header is not on the top of the page

Hello,

I have a struggle with header. Before header there is white line, so my header color comes right after it. Im trying to fix it, but just can't do it.

heres my code of header

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

3 Answers

If i understand correctly there is a gap between the top of the page and the start of your header?? if that is what it is try this. Try setting a margin 0 and padding 0 before you add any styling to the header like this.

header { margin:0;padding:0;float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

try that .

or try negative margin to the top. header {float: left; margin: -20px 0 30px 0; padding: 5px 0 0 0; width: 100%; }

Negative margin worked, thank you

Maksim Kazlouski
Maksim Kazlouski
8,986 Points

Hi, Evaldas.

I faced your problem with empty space at the top of page.

What i find out that in mine project there were pictures, like Nick had in his portfolio gallery, that were pushing somehow content away from the top. Try commenting different blocks of html code to find out what code causing problems.

UPD: i found problem in my case. When i'm assigning css rule for mine <ul> in navigation to <section> tag instead of <ul> it pushes all page away from the top in browser.

<div id="wrapper"> <section> <!--NO id="gal" HERE--> <ul id="gal"> <li> <img src="img/html5-logo.png"> ...