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

Leah Miller
Leah Miller
16,291 Points
Posted by Leah Miller
Leah Miller
16,291 Points

Unwanted background showing above header

I am adding one treehouse site that I created to another. I got the page styled the way I want but when I add the html and css for the header and footer so it matches the other pages the header bumps down and there is a bar of the body background at the top. I can not figure out what could be causing this. Still pretty new to all this. Help please.

It seems to happen as soon as I add a margin above, though it doesn't happen on the other pages with the same styling.

leahmillerdev.com : click on the eyes

2 Answers

Steven Parker
Steven Parker
231,046 Points
Steven Parker
Steven Parker
231,046 Points

As Kris pointed out, the h1 margin is causing this exposed background, but you might be wondering how that can be since the h1 is inside both the header and the anchor. This is due to a concept known as "margin collapse" where the margins of a parent element and a child element combine to make a single margin.

This will commonly reduce the margin size, since instead of adding them together, only the largest one is used. But in this case, it's allowing the margin of the child element to extend outside of the parent element.

For more details, see this MDN page on Mastering Margin Collapsing.

P.S. Loved that "eyes" pic! :wink:

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,970 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,970 Points

If you set the top margin of h1 in mash_style.css to zero then it goes away. What other pages besides mash1.html have the same styling?

Leah Miller
Leah Miller
16,291 Points
Leah Miller
Leah Miller
16,291 Points

Thank you and the index, about and contact pages have the same styling.