How to make sections have equal height?

Question

Here is a minimal working example of my code: https://codepen.io/SamHuguet/pen/xxZqNxK

• I have noticed that the 2 sections (each containing an h1 element) have different heights.

• I expected each section to have equal heights (the top section should extend to the top of the page). It looks like it's been cut off above the h1 element.

• Question 1: Why does the top section have a smaller height relative to the lower section?

I can use...

display: flex;
flex-direction: column;

... within the main element to solve this issue. Here is a minimal working example to demonstrate this: https://codepen.io/SamHuguet/pen/BajWEEZ

• Question 2: Why do these 2 lines of code solve the differences in height?

Please structure answers in direct reference to each question.