Contact Form Div Is Overlapping Footer - css

Question

I am making my own portfolio and want to add a contact form on it. But the div which contains the form is overlapping the footer in small screens. You can see the problem by running the code snippet. Could anyone please help me to solve this? It will be a great help. Thank you so much.
#contactus {
height: 105vh;
margin: 0 auto -80px;
position: relative;
z-index: 1;
}
#formContainer{ width: 85%; margin: 0 auto; background-color: aqua; }
.contactHead{ text-align: center}
.footer{
height:250px;
background-color:#1e1e1e;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
}
.footer h2{
color: #fff;
}
<div id="contactus">
<div id="formContainer">
<h1 class="contactHead">Get In Touch!</h1>
<h4 class="contactHead">I will be with you within 24 hours</h4>
<form id="contactForm">
<input type="text" id="nameContainer" placeholder="Name">
<br>
<br>
<input type="email" id="emailContainer" placeholder="Email Address">
<br>
<br>
<input type="text" id="messageContainer" placeholder="Message">
<br>
<br>
<input type="submit" value="Send Message">
</form>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>

Answer 1

The negative margin and height is messing things up. What is the reason for having that height and the negative margin?
#contactus {
margin: 0 auto;
position: relative;
z-index: 1;
}
#formContainer {
width: 85%;
margin: 0 auto;
background-color: aqua;
}
.contactHead {
text-align: center
}
.footer {
height: 250px;
background-color: #1e1e1e;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.footer h2 {
color: #fff;
}
<div id="contactus">
<div id="formContainer">
<h1 class="contactHead">Get In Touch!</h1>
<h4 class="contactHead">I will be with you within 24 hours</h4>
<form id="contactForm">
<input type="text" id="nameContainer" placeholder="Name">
<br>
<br>
<input type="email" id="emailContainer" placeholder="Email Address">
<br>
<br>
<input type="text" id="messageContainer" placeholder="Message">
<br>
<br>
<input type="submit" value="Send Message">
</form>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>