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 How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Rachit Agarwal
Rachit Agarwal
6,235 Points

Space above my header?

Hey guys! I'm doing the "Build a website" track and finished, kind of. There is this weird space above my green header only on the contact page, not on the about or portfolio pages. Here is a screenshot: http://vvcap.net/db/RAGwlV3gEjwfybTr398N.htp Any help would be appreciated. Thanks!

3 Answers

You might be having a float clearing problem that came up in another post. Whether you see the gap or not is dependent on what element you have first in your <section> The problem is that the header is floated and so the content boxes for both the wrapper and section begin at the top of the header, not right after the header as you might expect.

It looks like you used an h1 in your screenshot and that probably has a top margin set from normalize.css. Because the content area for the h1 begins at the top of the header, the h1's top margin extends upward from the top of the header. This produces the gap.

The solution I recommended in the other post is to clear the float with your wrapper element since this is the first element after the header. By clearing the floated header, the content boxes for the wrapper, section, and h1 will now begin below the header where they should be.

#wrapper {
clear: both;
}

Add the clear to your existing wrapper rule.

Adam Duffield
Adam Duffield
30,494 Points

Just check that your margins and paddings were reset to zero. It's probably either your header, h1, or body so just check the settings on these and try and set them to zero where possible. That should hopefully work.

Rachit Agarwal
Rachit Agarwal
6,235 Points

Thanks Adam! The problem is that everything is perfect on the about and portfolio pages, so I thought it would be something with the HTML for contact since the CSS is the same. However, the HTML is fine because the problem is still present when I used the teacher's code...

Adam Duffield
Adam Duffield
30,494 Points

Pretty sure it will be your css, just re-check through the css videos see if you missed anything out. :) or right at the top of your css code just put

body, h1, nav, div, p (e.c.t.) then set margin, paddings and border to 0. Any of your css code after that should overide that reset but there should be no wierd gaps and e.c.t. later on.