Divs overlap when height is set manually
<p>Here's the page: <a href="https://hamzicabdulah.github.io/Raptitude/" rel="nofollow noreferrer">https://hamzicabdulah.github.io/Raptitude/</a></p>

<p>The divs with the "other-stories" and "footer" classes overlap when the height of the "other-stories" div is set manually:</p>

<pre><code>.other-stories {
  height: 65%;
}
@media screen and (min-width: 768px) {
  .other-stories {
    height: 89%;
  }
}
</code></pre>

<p>If I remove the above code, the divs don't overlap. What's the workaround here, considering the manually set height of the "other-stories" div needs to stay there in order to work fine in Firefox?</p>