All the container elements are block-level elements (full width) so they already stack on top of each other (without using grid). Each container element can be given a height (instead of a row size) if needed, like if you need them each to be 100vh.
Grid rows are created implicitly, if you put three elements inside a grid it will automatically create three rows. For more complex layouts you sometimes need to explicitly create more rows than what would automatically be created for you, or sometimes you need to size the rows (to something other than the natural height from the content). But most times, you do not need to explicitly create the rows.
The margin is just making the container taller, the element has no space to move up into. The space between the headings should be created using margin/padding between the elements (bottom for the top element or top for the bottom element). I know I suggested using a negative margin but you really shouldn’t need it here. Adjusting the bottom/top margin and padding on the elements should be good enough (but if the negative margin is giving you what you want then I guess it’s fine).
I would suggest creating a container for both the heading and the subheadings. Position the headings by moving the container (centering it and/or using margin/padding). Create the vertical space between the headings using margin-bottom on the main heading (remove any padding or margin that isn’t needed).