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

Evan Grazi
PLUS
Evan Grazi
Courses Plus Student 689 Points

Removing white space on top of header

I have a bit of white space on the top of my header but only on the main page. When I open up the other pages, the header moves up and there is no longer any blank space. I'm not sure how to solve the problem and it is getting very frustrating. If anyone has any ideas, please let me know.

3 Answers

Rostislav Kavan
Rostislav Kavan
6,818 Points

Could you provide your code or link to a hosted website?

Rostislav Kavan
Rostislav Kavan
6,818 Points

I see your code via inspector. Ok, the space above is caused by #gallery margin 10px.

Rostislav Kavan
Rostislav Kavan
6,818 Points

The thing is that you have floating elements in your header, therefor the UL element which is in the section below is not actually displayed below, because you are not clearing the elements. One workaround is to insert empty element with class clear into your header, after the two floating elements and assign clear:both; to clear class. Then the margin wont be applied to the top of the page, but will be applied to ul#gallery inside the section.

The second option might be to apply clear:both; to the element Section itself.

I can't see the website but the better option would be to add the clear:both to the 1st element after the header.

Rostislav Kavan
Rostislav Kavan
6,818 Points

Yea, the Section element.