Hey there, I've encountered some odd CSS behavior that I don't understand. I created an example page containing three main parent elements - a header, a form, and a footer. Each of them contain child elements. Each of the three main elements have been given zero top and bottom margins and zero padding. I don't understand why enabling a CSS rule that gives the h1 or p child elements a margin of more than zero affects the margin of their parent elements, causing the header and/or footer to be set apart from the form rather than nestled right up against it as they are when I don't do that. I've put the example code into Codepen at https://codepen.io/Ellyria/pen/VGNPBK
in case anyone wants to play around with it.