Footer doesn't stay on bottom - html

Question

When the width of the page gets smaller, the footer jumps "in the middle" of the page.
I tried setting position ablsolute and bottom 0 but then , it stayed in the middle all the time.
Also set html height to 100% and nothing happened. Anybody knows what's the problem?
Thanks in advance.
https://codepen.io/hmarinos/pen/QWayGWJ
* {
border-sizing: border-box;
font-family: sans-serif;
}
html {
height: 100%;
}
body {
margin: 0;
position: relative;
}
#header {
display: flex;
justify-content: space-around;
background-color: black;
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
width: 75%;
padding: 8px 0;
}
img {
width: 64px;
height: 64px;
border-radius: 50%;
border-style: solid;
display: block;
margin: auto;
}
img:hover {
border-color: rgb(0, 250, 0);
}
#header-img {
display: flex;
color: white;
}
#img {
margin-right: 10px;
}
nav ul {
display: flex;
list-style: none;
}
a {
text-decoration: none;
color: white;
}
.nav-link {
padding: 0 40px;
}
.nav-link a:hover {
color: rgb(0, 250, 0);
}
#nav-bar {
align-self: center;
}
.form_container {
padding: 10px 0;
background-color: black;
}
#form {
display: flex;
justify-content: center;
height: 40px;
}
input {
padding: 8px 0;
border: none;
}
#email {
width: 400px;
padding-left: 10px;
border-radius: 4px 0 0 4px;
}
#submit {
width: 80px;
border-radius: 0 4px 4px 0;
background-color: #eee;
color: black;
font-weight: bold;
border-style: solid;
border-color: #eee;
border-width: 1px;
}
#submit:hover {
background-color: black;
color: white;
}
.main {
background-color: #eee;
width: 75%;
height: 1800px;
margin-left: auto;
margin-right: auto;
}
.column {
width: 300px;
background-color: white;
height: 500px;
border-style: solid;
border-width: 1px;
margin: 0 20px;
border-radius: 5px;
box-shadow: 0 0 10px grey;
}
.column h5 {
text-align: center;
background-color: lightgrey;
margin-top: 0;
padding: 10px 0;
}
.column h5 p {
margin-top: 5px;
margin-bottom: 0;
font-size: 18px;
}
.pricing {
height: 52%;
margin-top: -22px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.pricing_content {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding-top: 40px;
}
#link_one {
font-weight: bold;
font-size: 1em;
width: 45%;
padding: 10px 10px;
margin-left: auto;
margin-right: auto;
background-color: black;
border-radius: 3px;
border-style: solid;
border-width: 1px;
border-color: transparent;
}
#link_one:hover {
background-color: white;
border-style: solid;
border-width: 1px;
border-color: black;
color: black;
font-weight: bold;
}
#link_two {
color: black;
font-weight: bold;
margin-top: 25px;
background-color: #eee;
width: 45%;
padding: 10px 10px;
margin-left: auto;
margin-right: auto;
}
#link_two:hover {
background-color: lightgrey;
}
#below_button {
margin-top: 60px;
}
.plans {
display: flex;
justify-content: center;
padding-top: 100px;
}
.checks {
width: 100%;
}
.checks ul {
list-style-type: none;
}
.checks ul li:before {
content: '✓';
padding-right: 8px;
color: rgb(0, 230, 0);
}
ul li {
text-indent: -1.25em;
}
.separator {
height: 1px;
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: lightgrey;
}
#media only screen and (max-width:1180px) {
.plans {
display: flex;
flex-direction: column;
align-items: center;
}
.column {
margin-bottom: 20px;
}
}
.video_container {
width: 75%;
height: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
justify-content: center;
text-align: center;
}
#video {
width: 100%;
height: 600px;
}
.benefits {
width: 100%;
margin-top: 100px;
height: 300px;
}
.items {
width: 80%;
height: 300px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}
.icons {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
}
.items i {
margin: 26px 0;
}
.icons_text {
margin-left: 10px;
}
.icons_text p {
padding: 26px 0;
}
.fa-solid {
color: rgb(0, 250, 0);
}
.footer {
width: 75%;
height: 200px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
bottom: 0;
position: static;
}
.contact_info {
background-color: black;
width: 100%;
height: 120px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.icons_left ul {
list-style: none;
display: flex;
margin: 0;
padding: 40px 30px;
}
.icons_left ul li {
padding: 0 40px;
color: white;
}
.contact_right {
font-size: 1.05em;
padding: 10px 30px;
color: white;
}
.footer .fa-2x:hover {
color: rgb(0, 250, 0);
}
<body>
<div class="wrap">
<div id="header">
<div id="header-img">
<img id="img" src="https://pngimg.com/uploads/gorilla/gorilla_PNG18705.png" alt="">
<h1>Gorilla Drive</h1>
</div>
<div id="nav-bar">
<nav id="links">
<ul>
<li class="nav-link">Deals</li>
<li class="nav-link">Benefits</li>
<li class="nav-link">Contact</li>
</ul>
</nav>
</div>
</div>
<div style="height:98px;"></div>
<div class="main">
<div class="plans">
<div class="column">
<h5>Basic<br>
<p>100 GB</p>
</h5>
<div class="pricing">
<div class="pricing_content">
<a id="link_one" href="#">$2,99/month</a>
<i id="below_button">Pay annualy (save 100%)</i>
<a id="link_two" href="">$20,99/year</a>
</div>
</div>
<div class="separator"></div>
<div class="checks">
<ul class="check_links">
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum dolor lahim.</li>
</ul>
</div>
</div>
<div class="column">
<h5>Standard<br>
<p>1 TB</p>
</h5>
<div class="pricing">
<div class="pricing_content">
<a id="link_one" href="#">$2,99/month</a>
<i id="below_button">Pay annualy (save 100%)</i>
<a id="link_two" href="">$20,99/year</a>
</div>
</div>
<div class="separator"></div>
<div class="checks">
<ul class="check_links">
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum dolor lahim.</li>
<li>Lorem ipsum dolor lahim baban.</li>
</ul>
</div>
</div>
<div class="column">
<h5>Premium<br>
<p>2 TB</p>
</h5>
<div class="pricing">
<div class="pricing_content">
<a id="link_one" href="#">$2,99/month</a>
<i id="below_button">Pay annualy (save 100%)</i>
<a id="link_two" href="">$20,99/year</a>
</div>
</div>
<div class="separator"></div>
<div class="checks">
<ul class="check_links">
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum dolor lahim.</li>
<li>Lorem ipsum dolor lahim baban.</li>
<li>Lorem ipsum dolor lahim baban sahim.</li>
</ul>
</div>
</div>
</div>
<div class="benefits">
<div class="items">
<div class="icons">
<i class="fa-solid fa-fire fa-3x"></i>
<i class="fa-solid fa-jet-fighter-up fa-3x"></i>
<i class="fa-solid fa-user-group fa-3x"></i>
</div>
<div class="icons_text">
<p><b>High quality!</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper posuere nisi eu finibus.</p>
<p><b>Jet Fast support!</b> Proin feugiat sem tellus, commodo lacinia dui viverra ac. Sed sollicitudin non metus sed sagittis. Nunc at tincidunt magna.</p>
<p><b>Share with your family!</b> Aliquam vel mi blandit, venenatis risus vel, pellentesque nisl. Suspendisse et sem leo.</p>
</div>
</div>
</div>
<div class="video_container">
<h4>What a video!</h4>
<iframe id="video" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="footer">
<div class="form_container">
<form id="form" action="https://www.freecodecamp.com/email-submi">
<input id="email" type="email" placeholder="email">
<input id="submit" type="submit">
</form>
</div>
<div class="contact_info">
<div class="icons_left">
<ul>
<li><i class="fa-brands fa-github fa-2x"></i></li>
<li><i class="fa-brands fa-facebook fa-2x"></i></li>
<li><i class="fa-brands fa-steam fa-2x"></i></li>
<li><i class="fa-brands fa-cc-visa"></i></li>
<li><i class="fa-brands fa-cc-mastercard"></i></li>
<li><i class="fa-brands fa-cc-apple-pay"></i></li>
<li><i class="fa-brands fa-google-pay"></i></li>
<li><i class="fa-brands fa-cc-paypal"></i></li>
<li><i class="fa-brands fa-cc-amex"></i></li>
</ul>
</div>
<div class="contact_right">
<i><b>Our email:</b> <br>example#123.com</i>
<p><b>Our address:</b> <br>Catherine st. 29 New York</p>
</div>
</div>
</div>
</div>
</body>

Answer 1

Looks like you have an errant closing tag at the end before the closing body tag. I deleted it, and it looks like it addressed the issue.