Parallax Footer not working without inline-block

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

Parallax Footer not working without inline-block

0 Answers0