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 Styling Web Pages and Navigation Polish the Navigation and Footer

Posted by Diane Ancheril
Diane Ancheril
1,109 Points

Bizarre header margin issue.

On my 'about' page I seem to have no issues with the margin on the top for the header but on my home page there is a white spacing between my header and the top of the page. Since both pages are accessing the same CSS file, why would it work for one and not the other?

Thanks!

2 Answers

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

It could be that you have different elements inside the header.

What you are seeing might be the result of "margin collapse" where margins of child elements can extend beyond the parent element. And if you use float, even stranger things can happen and the extending margin could be from element(s) below the header.

To enable a more detailed analysis you could post your code (properly formatted) here, or even better, make a snapshot of your workspace and post the link to it here.

Diane Ancheril
Diane Ancheril
1,109 Points

As far as I can see the elements in both index.html and about.html are the same for the header. But I maybe wrong. Here's the snapshot : https://w.trhou.se/69sfbqejek Thanks so much for your help!

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

It was exactly what I suspected, a combination of margin collapse and float effects.

There's several ways to address this, but here's one easy one:

main.css 
#wrapper {
    overflow: auto;
}
Diane Ancheril
Diane Ancheril
1,109 Points
Diane Ancheril
Diane Ancheril
1,109 Points

You were absolutely right. Thanks, once again!