footer displaying on top of main - html

Question

My footer is displaying on top of my main. I've been looking for days to fix this now but can't seem to find a solution. My teacher couldn't find it aswell. I hope someone of you can see where the problem is and would appreciate it so much to take time to look at it! It's driving me crazy...
Thank you so much on advance!
here is the link
html {
box-sizing: border-box;
font-size: 62.5%;
font-family: 'Fira Sans';
scroll-behavior: smooth;
}
*,
*: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: 'Fira Sans Hair Italic';
src: url(../assets/fonts/FiraSans-HairItalic.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: 70rem;
width: 100%;
background-position: right;
background-repeat: no-repeat;
}
.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;
}
.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%;
}
.container-footer {
width: 96rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
text-align: right;
padding-top: 25rem;
}
footer li {
height: 8rem;
list-style: none;
text-decoration: none;
}
.social-media {
padding-top: 5rem;
display: flex;
justify-content: space-between;
}
<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 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>
<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>
to the website

Answer 1

Your .bg-flow div has a fixed height.
Just get rid off it.
Also, I would advice you to remove the flex parameters from your .container-footer, since it is not part of the flow of elements displayed. Flex items need to be consecutive. You've defined the elements in container main as flex, but this is in your footer.
Last point, I don't know if you want these footer links to have this vertical appearance, if not, I think you should define this:
footer ul li {
display: inline-block; // or float: left; as you prefer.
}
Let me know if it works for you.

Answer 2

This is because your .bg-flow has a height value 102rem and your content is exceddind the height value.
I will suggest use min-height instead of height, if you want to give height to that div
Stack Snippet
html {
box-sizing: border-box;
font-size: 62.5%;
font-family: 'Fira Sans';
scroll-behavior: smooth;
}
*,
*: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: 'Fira Sans Hair Italic';
src: url(../assets/fonts/FiraSans-HairItalic.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: 70rem;
width: 100%;
background-position: right;
background-repeat: no-repeat;
}
.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);
min-height: 120rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
}
.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%;
}
.container-footer {
width: 96rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
text-align: right;
padding-top: 25rem;
}
footer li {
height: 8rem;
list-style: none;
text-decoration: none;
}
.social-media {
padding-top: 5rem;
display: flex;
justify-content: space-between;
}
<!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 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>
<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>