Re: h1 top-margin bumping down

[wolfcry911]

First, the header moving down is correct behavior. Its the way margins collapse. The h1 top margin protrudes out from the top of the parent.
Now, there’s a number of ways to get what you want. The position: relative suggestion above will work if you want to get into absolute positioning of the h1, but it’s not needed here. One way is to give the header div either a top padding or top border (of any amount but 1px will work). This gives the h1’s margin something to ‘push’ against. Another way is to set overflow: hidden; on the header div. What this does is change it’s Block Formatting Context and the margins will react in a different manner.