On resize, div shoots up above the other - html

Question

This is probably an easy fix, but I can't seem to figure out whats wrong. I deleted everything not necessary so hopefully the code isn't too bad to read.
Basically when you scale the page down, width wise, the footer(contact) overlaps the div above it. On the Code Pen its already overlapping.
HTML:
<div class="library library-row specialties">
<div class="container">
<div class="desc">
<h1>Our Specialties<br/></h3>
<p>
Everything we can do for you
</p>
</div>
<div class="row row-images">
<div class="col-sm-4">
<i class="fa fa-database" aria-hidden="true"></i>
<h4>Databases</h4>
</div>
<div class="col-sm-4">
<i class="fa fa-server" aria-hidden="true"></i>
<h4>Servers</h4>
</div>
<div class="col-sm-4">
<i class="fa fa-cloud" aria-hidden="true"></i>
<h4>Cloud Integration</h4>
</div>
</div>
</div>
</div>
<div class="footer library library-row">
<div class="container">
<div class="accounts">
<i>
</i>
</div>
</div>
</div>
CSS: (I'm having trouble pasting it in, sorry but please get it from the Code Pen)
Code Pen: Click Here
Again, sorry if this is a basic fix. I tried, but I'm not sure whats wrong with it.

Answer 1

There is some CSS being applied to .specialties which is fixing the height of that div. The footer is placed below that div, but the content in the .specialties div is vertically overflowing outside of the div, thus the content rendering underneath and below the footer.
Remove this height: 100vh; CSS and you can see why this is happening. Probably in need of refactor, which I'm happy to help with if you can explain the design intentions.
.specialties {
height: 100vh;
}