footer displays somewhere midpage - html

Question

I accidentally put my footer in my main tag (but my page displayed correctly) and saw this so I corrected it. But when I did that my footer displayed somewhere in the mid between my header and my main... It's a really important project for school and tomorrow is the deadline if anyone could help me with this because I have been looking for hours and can't seem to find what I did wrong and it's driving me crazy! Any help is so so appreciated!
This is the link to the site
html{
box-sizing: border-box;
font-size: 62.5%;
font-family: 'Fira Sans';
}
*, *:before, *:after{
box-sizing: inherit;
}
#font-face {
font-family: 'Fira Sans';
src: url(../assets/fonts/FiraSans-Regular.otf) format('opentype');
}
#font-face {
font-family: 'Fira Sans Light';
src: url(../assets/fonts/FiraSans-Light.otf) format('opentype');
}
#font-face {
font-family: 'Fira Sans Heavy';
src: url(../assets/fonts/FiraSans-Heavy.otf) format('opentype');
}
#font-face {
font-family: 'Fira Sans Extra Bold';
src: url(../assets/fonts/FiraSans-ExtraBold.otf) format('opentype');
}
#font-face {
font-family: 'Moon';
src: url(../assets/fonts/Moon-Light.otf) format('opentype');
}
.bg-header{
background-image: url(../assets/img/paintdrop-test-01-01.svg);
height: 77.5rem;
width: 128.6rem;;
background-repeat: no-repeat;
background-position: top ;
margin: 0 auto;
}
.container-header{
width: 96rem;
margin: 0 auto;
display: flex;
flex-direction: column;
}
nav{
display: flex;
justify-content: center;
padding: 4rem 0rem;
}
nav ul{
display: flex;
justify-content: space-between;
width: 50%;
}
nav ul li{
list-style: none;
display: inline;
}
a{
text-decoration: none;
color: black;
text-transform: uppercase;
font-family: 'Fira Sans';
letter-spacing: .2rem;
font-size: 1.5rem;
display: block;
padding: 1rem 2rem;
}
.link:hover /*, a:not([class="button-wit"])*/{
color: white;
border-radius:1.5rem;
background: linear-gradient(to left, #363795, #005c97);
transition: all .2s ease-in-out;
}
.title{
display: flex;
background-image: url(../assets/img/blue-monday-title.svg);
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 50rem;
}
h1{
font-size: 13.5rem;
text-transform: uppercase;
font-family: 'Fira Sans Heavy';
}
.hide{
display: none;
}
.intro{
font-size: 2rem;
letter-spacing: .15rem;
line-height: 1.5;
width: 45%;
margin-left: 37rem;
margin-top: -22rem;
font-family: 'Fira Sans Light';
}
.btn-class{
display: flex;
justify-content: center;
transition: all 1s ease-in-out;
}
.button-blue{
margin: 10rem 0rem 5rem 10rem;
color: white;
border-radius:1.5rem;
background: linear-gradient(to left, #363795, #005c97);
}
.button-blue:hover{
transform: scale(1.1);
}
main{
margin-top: 7rem;
}
h2{
font-family: 'Fira Sans Extra Bold';
letter-spacing: .18rem;
font-size: 6.5rem;
}
/* .bg-main-small{
background-image: url(../assets/img/splash-drop-small-01.svg);
height: 40rem;
width: 40rem;
background-position: left;
background-repeat: no-repeat;
position: absolute;
margin-left: 5rem;
} */
.bg-main-big{
background-image: url(../assets/img/splash-drop-02-01.svg);
height: 82rem;
width: 300rem;
background-position: right;
background-repeat: no-repeat;
position: absolute;
right: 0;
}
.container-main{
width: 96rem;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.article-1{
display: flex;
flex-direction: column;
margin-top: 30rem;
margin-left: 5rem;
}
.article-text{
margin-top: 2rem;
font-family: "Fira Sans Light";
font-size: 2rem;
letter-spacing: .1rem;
line-height: 3.2rem;
width: 50%;
}
.bg-flow{
margin-top: 5rem;
background-image: url(../assets/img/flow_1.svg);
height: 120rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
.article-2{
color: white;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 45rem;
}
.mid{
text-align: center;
width: 70%;
}
.button-wit{
color: white;
border-radius: 1.5rem;
margin-top: 5rem;
border: .1rem solid white;
}
.button-wit:hover{
background-color: white;
color: #005c97;
}
.article-3{
display: flex;
margin-top: 45rem;
}
.blue-moonday-text{
display: flex;
flex-direction: column;
padding-left: 5rem;
}
.right{
width: 100%;
}
.footer-img{
background-image: url(../assets/img/footer-splashes-01.svg);
background-repeat: no-repeat;
height: 30rem;
width: 100%;
position: absolute;
}
.container-footer{
width: 96rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
text-align: right;
position: relative;
padding-top: 25rem;
}
footer li{
height: 8rem;
list-style: none;
text-decoration: none;
}
.social-media{
padding-top: 5rem;
display: flex;
justify-content: space-between;
}
.color{
background-image: url(../assets/img/COLOR.svg);
background-repeat: no-repeat;
width: 100%;
height: 30rem;
margin-top: 10rem;
animation-name: fadeInLeft;
animation-duration: 2s;
}
#keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-5%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.button-discover{
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blue Monday</title>
<link rel="icon" href="./assets/img/devine.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet"> -->
</head>
<body>
<header>
<div class="bg-header">
<div class="container-header">
<h1 class="hide">Blue Monday</h1>
<nav>
<ul>
<li>home</li>
<li>activiteiten</li>
<li>extra </li>
</ul>
</nav>
<div class="title"></div>
<p class="intro">Het is ondertussen geen geheim meer. Maandagen zijn echt kutdagen. Maar als je er dan eentje moet uitkiezen die de ergste is, dan is het wel deze. </p>
</div>
<div class="btn-class">
Discover more
</div>
</div>
</header>
<main>
<!-- <div class="bg-main-small"></div> -->
<div class="bg-main-big" id="blok1"></div>
<div class="container-main">
<article class="article-1">
<h2>Feeling blue.</h2>
<p class="article-text">Het is amper 2 weken na het nieuwe jaar. Het jaar dat JOUW jaar ging worden... <br> Alleen zijn al je goede voornemens al mislukt, de vakantie lijkt nog mijlenver en bovendien maakt dit weer het geen haar beter. “To feel blue” betekent letterlijk
je rot of triestig voelen en dat is dan ook het gevoel dat je met nog veel andere mensen deelt.</p>
</article>
</div>
<div class="bg-flow">
<div class="container-main">
<article class="article-2">
<h2>Je bent niet alleen.</h2>
<p class="article-text mid">Je staat er niet alleen voor. Iedereen heeft last van deze dag. Elk jaar opnieuw is blue monday de meest depressieve dag ter wereld. Maar wij zullen proberen om blue monday wat meer kleur te geven!</p>
<br>
<span> activiteiten </span>
</article>
<article class="article-3">
<img src="./assets/img/moon-with-holes.svg" alt="Blue Moonday" width="500" height="500" class="blue-moon">
<div class="blue-moonday-text">
<h2>Blue Moonday.</h2>
<p class="article-text right">Voor degene die niet genoeg hebben aan deze tips: er is meer. Denk je dat de sky the limit is? Het kan verder. Veel verder. Zo ver dat je even een tripje naar de maan kan maken op deze dag waardoor je simpelweg blue monday kan overslaan! Laat
deze mensen maar afzien op deze kutdag op aarde, jij bent even gaan viben in space.</p>
</div>
</article>
</div>
</div>
</main>
<footer>
<div class="footer-img"></div>
<div class="container-footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Devine</li>
</ul>
<div class="social-media">
<img src="./assets/img/devine.png" alt="devine" width=50 height=50>
<img src="./assets/img/facebook.png" alt="facebook" width=50 height=50>
<img src="./assets/img/twitter.png" alt="twitter" width=50 height=50>
</div>
</div>
</footer>
</body>
</html>

Answer 1

It actually is not between your header and main, but after your main. The problem is that your main is not expanding because .bg-flow is position: absolute thus is ignored by your main. You also set your .bg-flow to a fixed height which makes it not expanding. If you download Firefox and use "Inspect element" you can see the borders of your elements which will probably help you a lot.

Answer 2

It look like the footer is not by default at the bottom of the page.
You can try this:
footer style='position:fixed;bottom:0px;'