Can't conceputalize how margins work

This isn’t an issue with the project, but I randomly ran into this, and haven’t been able to conceptualize what’s happening here. Pictures for reference:

When the margin for the header is set to 0, everything is as expected. The top border of the MOVE header and the div .container, in which it is nested, are the same. However, if you get rid of the margin: 0; line, then for some reason the MOVE header now has very large top and bottom margins. Why is this occurring?

<do not remove the three backticks above>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.