Stop DIV from moving up when resizing window - html

Question

I'm designing a simple responsive website, and I have a "special" DIV that is the only one that takes 100% width of the body. When I resize the the browser up and down, that DIV is moving upwards and covers the DIV above. This only happens when I add my responsive CSS.
This is what it should look like at all times.
This is what is happening when I resize the window upwards.
My code:
header {
width: 80%;
margin: 0 auto;
height: calc(100vh - 60px);
}
/* Header content */
.header-content {
text-align: center;
margin-top: 8%;
padding: 5%;
padding-top: 0;
}
.header-content img {
width: 64%;
height: auto;
}
.header-content h6 {
font-size: 1.6em;
font-weight: 300;
margin-top: 3%;
line-height: 1.5em;
}
.stores {
display: inline-block;
width: 100%;
margin: 0 auto;
text-align: center;
margin-top: 6%;
}
.badges {
display: inline-block;
}
.badges img {
width: 40%;
height: auto;
}
/* Header Device */
.header-device {
text-align: center;
margin-top: 4%;
}
.header-device img {
width: 50%;
height: auto;
}
/* :::: Image Call:::: */
.image-call {
width: 100vw;
height: 450px;
position: relative;
background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../img/people.jpg);
background-size: cover;
z-index: 100;
}
.image-call h5 {
text-align: center;
font-size: 3em;
font-weight: 200;
color: #fff;
margin-top: 10%;
}
/* MY RESPONSIVE CODE */
#media (max-width: 991.98px) {
body {
background-color: #ececec;
}
/* Header */
header {
height: calc(100vh - 60px);
}
/* Image Call */
.image-call {
margin-top: -10%;
height: 356px;
}
.image-call h5 {
margin-top: 12%;
}
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- /Bootstrap 4 -->
<!-- HEADER -->
<header>
<div class="row">
<div class="header-content col-lg col-sm-12">
<img src="img/logo-simplecash.svg" alt="Logo SimpleCash">
<h6>text here</h6>
<div class="col-12">
<div class="row">
<div class="stores">
<div class="badges col-lg-12 col-sm-12">
<img src="img/google-play-badge.svg" alt="Google Store">
<!--a href="#"><img src="img/app-store-badge.svg" alt="App Store"></a-->
</div>
</div>
</div>
</div>
</div>
<div class="header-device col-lg col-sm-12">
<img src="img/screen-home.png" alt="App Simple Cash">
</div>
</div>
</header>
<!-- / HEADER -->
<!-- IMAGE CALL -->
<div class="row">
<div class="image-call col-12">
<h5>text here text here <br /> text here text here
</h5>
</div>
</div>
<!-- / IMAGE CALL -->

Answer 1

Use percent height instead px could work
EDIT:
I didn't see the margin-top: -10% inside media query.
That negative margin cause your problem, edit that value to achieve a good position

Answer 2

After reviewing my code I found what was causing this issue.
Basically, I changed this part of my responsive CSS:
header {
height: auto;
}
In my initial CSS it was set like this (so that it would take 100% of the window's height):
header {
height: calc(100vh - 60px);
}