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
Diane Ancheril
1,109 PointsBizarre 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
231,275 PointsIt 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
1,109 PointsYou were absolutely right. Thanks, once again!
Diane Ancheril
1,109 PointsDiane Ancheril
1,109 PointsAs 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
231,275 PointsSteven Parker
231,275 PointsIt 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: