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

Posted by Evaldas Burlingis
Evaldas Burlingis
1,079 Points

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

Andreas cormack
.a{fill-rule:evenodd;}techdegree seal-36
Andreas cormack
Python Web Development Techdegree Graduate 33,011 Points

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%; }

Evaldas Burlingis
Evaldas Burlingis
1,079 Points
Evaldas Burlingis
Evaldas Burlingis
1,079 Points

Negative margin worked, thank you

Maksim Kazlouski
Maksim Kazlouski
8,986 Points
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"> ...