Parallax Footer not working without inline-block - html

Question

I am trying to figure out why my parallax footer is only working correctly with display in css set to "inline-block". I can't use it with this property because I need margin collapse.
Here is my HTML
<main>
<div class="headline-big">
<h1>News</h1>
</div>
<div class="headline-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis dolores veniam reiciendis est voluptates eum nihil quae odio modi! Sequi maiores unde officiis eius debitis rem iure reprehenderit distinctio fugit.</p>
</div>
</main>
<footer>
This is the footer
</footer>
And here my CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
main {
background: #f6f6f6;
width: 100%;
position: relative;
z-index: 2;
margin-bottom: 600px;
/* WOULD WORK WITH inline-block, but can't use it, because I need margin-collapse */
/* display: inline-block; */
}
.headline-big,
.headline-content {
display: grid;
grid-template-columns: repeat(14, minmax(90px, 1fr));
margin: 130px 0;
}
.headline-big h1 {
font-size: 250px;
grid-column: 4 / 12;
}
.headline-content p {
grid-column: 4 / 12;
font-size: 20px;
display: block;
}
footer {
position: fixed;
bottom: 0;
background: #4f543e;
width: 100%;
height: 600px;
color: white;
text-align: center;
font-size: 25px;
}
What am I doing wrong? If you want to see it in action to "toggle" on/off the display property I prepared a codepen: https://codepen.io/codevelop-at/pen/yLqrrPw