Well, actually, there is a underlying reason for this. What you are dealing with here. Lets simplify the example, like i did here as you can see, i made the background of body gray, so you see the headings margin, causes our aqua box/div to shift down, this phenomenon is called Collapsing margins. from w3c:
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin
now, div and your heading are both boxes and as you have noticed they formed a single margin, which is rather annoying. You can overcome this problem (as you can read in the w3c link) by adding a padding, which i already added for you in my bin, go ahead, uncomment it, you will the collapsed margin is gone, since now padding (all be it just 0.01px) is now separating the two boxes, preventing collapsed margin.
Someone did a good job of explaining this here in case my explanation is bad