Main overflowing on to footer - html

Question

I’m currently working on a project from Frontend mentor, while developing the mobile version an issue arose where the main section is overflowing onto the footer section.
:root {
--DarkViolet: hsl(256, 26%, 20%);
--Grayish-Blue: hsl(216, 30%, 68%);
--VeryLight-Gray: hsl(0, 0%, 98%);
--Dark-Grayish-Violet: hsl(273, 4%, 51%);
--Very-Dark-Violet: hsl(270, 9%, 17%);
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.hide {
display: none;
}
.content-container {
width: 100%;
padding: 10px 0;
margin: auto;
}
main {
border: 10px dashed red;
display: flex;
flex-direction: column;
}
.flex {
display: flex;
}
.purple {
background-color: var(--DarkViolet);
color: #fff;
}
button {
background-color: var(--DarkViolet);
color: #fff;
border: 2px solid;
padding: 5px 20px;
font-size: .8em;
width: 200px;
}
#media only screen and (min-width: 214px) {
* {
overflow-x: hidden;
}
.content-container {
width: 90%;
}
header {
position: fixed;
background-color: white;
width: 100%;
z-index: 15;
}
header .flex {
flex-direction: row;
justify-content: space-between;
margin-top: 10px;
}
header>* {
padding: 20px;
justify-content: space-between;
}
.menu {
position: fixed;
top: 0;
right: 0;
margin-top: 60px;
background-color: var(--Very-Dark-Violet);
padding: 50px 0;
text-align: center;
height: 100%;
width: 100%;
transform: translateY(-800px);
opacity: 0;
transition: all 0.5s ease-in-out;
}
.menu img {
width: inherit;
position: absolute;
right: 0;
bottom: 0;
}
.menu.open {
overflow: hidden;
opacity: 1;
font-size: 1.3em;
transform: translateY(0px);
transition: all 0.5s ease-in-out;
background-image: url(images/bg-pattern-mobile-nav.svg);
background-position: bottom;
background-repeat: no-repeat;
}
.menu .navLinks {
border: 1px solid gray;
display: block;
list-style: none;
background-color: inherit;
color: #000;
}
.menu .navLinks li {
color: white;
margin: auto;
margin-bottom: 40px;
margin-left: 0;
width: 100%;
}
.menu .navLinks li a {
color: white;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
padding: 0;
margin: 0;
}
.menu .navLinks button {
width: 80%;
font-size: 1.2em;
text-transform: uppercase;
}
main {
transform: translateY(70px);
}
.mobile-intro-img {
width: 100%;
object-fit: fill;
margin-bottom: 0;
}
.purple-big-banner {
border: 3px solid red;
margin: 0;
background-color: var( --Very-Dark-Violet);
color: white;
position: relative;
overflow: hidden;
background-image: url(images/bg-pattern-intro-left-mobile.svg);
background-repeat: no-repeat;
}
.purple-big-banner .mobile-intro-img-left {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.purple-big-banner .mobile-intro-img-right {
position: absolute;
bottom: -50%;
z-index: 100;
right: 0;
}
.purple-big-banner .content-container {
border: 3px dashed white;
}
.purple-big-banner .content {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
gap: 2em;
margin: auto;
padding-top: 60px;
padding-bottom: 60px;
border: 1px solid red;
}
.purple-big-banner button {
margin: auto;
width: 60%;
}
.content-container>.mobile-intro-img-right-continued {
position: absolute;
top: 35%;
right: 0;
}
h1 {
overflow: hidden;
text-align: center;
font-size: 2em;
line-height: .85;
font-family: 'DM Serif Display', serif;
}
.purple-big-banner p {
line-height: 1.4em;
margin: 10px 0;
font-size: 1.1em;
}
hr {
width: 100px;
margin: auto;
margin-top: 40px;
margin-bottom: 20px;
}
.flex {
flex-direction: column;
margin-top: 40px;
align-items: center;
justify-content: center;
}
.box {
margin-bottom: 40px;
border: 1px solid rgb(31, 31, 31);
}
.box img {
padding: auto;
border: 1px solid red;
}
.box>* {
margin-bottom: 20px;
text-align: center;
}
.box p {
color: var(--Grayish-Blue);
}
.small-banner {
border: 5px solid red;
text-align: center;
background-image: url(images/bg-pattern-how-we-work-mobile.svg);
background-color: var( --Very-Dark-Violet);
color: white;
}
.small-banner .content {
display: flex;
flex-direction: column;
gap: 20px;
padding: 40px 0;
}
.small-banner button {
margin: auto;
width: 65%;
}
footer {
background-color: var(--VeryLight-Gray);
background-image: url(images/bg-pattern-footer-mobile.svg);
background-repeat: no-repeat;
border: 3px solid blue;
}
}
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" rel="stylesheet">
<header>
<div class="content-container flex">
<img src="images/logo.svg" alt="" srcset="">
<nav class="menu">
<ul class="navLinks">
<li><a class="menuItem" href="#">How we work</a></li>
<li><a class="menuItem" href="#">Blog</a></li>
<li><a class="menuItem" href="#">Account</a></li>
<li><button class="menuItem">View plans</button></li>
</ul>
</nav>
<div class="hamburger ">
<img class="menuIcon" src="images/icon-hamburger.svg " alt="">
<img class="closeIcon hide" src="images/icon-close.svg" alt="">
</div>
</div>
</header>
<main class="flex-main">
<img src="images/image-intro-mobile.jpg" alt="" class="mobile-intro-img-left">
<div class="purple-big-banner">
<div class="content-container">
<div class="content">
<hr class="hide">
<div>
<h1> Humanizing your insurance.</h1>
</div>
<div>
<p>
Get your life insurance coverage easier and faster. We blend our expertise blank and technology to help you find the plan that’s right for you. Ensure you and your loved ones are protected.
</p>
</div>
<div>
<button class="upper">View plans</button>
</div>
</div>
</div>
<img src="images/bg-pattern-intro-right-desktop.svg" class="pattern-right hide" alt="" srcset="">
<img src="images/bg-pattern-intro-left-desktop.svg" class="pattern-left hide" alt="" srcset="">
</div>
<div class="content-container">
<img src="images/bg-pattern-intro-right-mobile.svg" alt="" class="mobile-intro-img-right-continued">
<div class="content">
<hr>
<h1>We’re different</h1>
<div class="flex">
<div class="box">
<div>
<img src="images/icon-snappy-process.svg" alt="">
</div>
<h2>Snappy Process</h2>
<p> Our application process can be completed in minutes, not hours. Don’t get stuck filling in tedious forms.</p>
</div>
<div class="box">
<div>
<img src="images/icon-affordable-prices.svg" alt="">
</div>
<h2> Affordable Prices</h2>
<p> We don’t want you worrying about high monthly costs. Our prices may be low, but we still offer the best coverage possible.</p>
</div>
<div class="box">
<div>
<img src="images/icon-people-first.svg" alt="">
</div>
<h2>People First</h2>
<p> Our plans aren’t full of conditions and clauses to prevent payouts. We make sure you’re covered when you need it.</p>
</div>
</div>
</div>
</div>
<div class="content-container small-banner">
<div class="content">
<div>
<h2>Find out more <br> about how we work</h2>
</div>
<button class="upper">How we work</button>
</div>
</div>
</main>
<footer>
<div class="footer-top">
<div class="content-container flex">
<div class="logo">
<img src="images/logo.svg" alt="" srcset="">
</div>
<div class="flex social">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-pinterest"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
</div>
</div>
<hr class="content-container">
</div>
<div class="footer-bottom content-container flex">
<div>
<p class="title upper">Our company</p>
<ul>
<li>How we work</li>
<li>Why Insure?</li>
<li>View plans</li>
<li>Reviews</li>
</ul>
</div>
<div>
<p class="title upper">Help me</p>
<ul>
<li>FAQ</li>
<li>Terms of use</li>
<li>Privacy policy</li>
<li>Cookies</li>
</ul>
</div>
<div>
<p class="title upper">Contact</p>
<ul>
<li>Sales</li>
<li>Support</li>
<li>Live chat</li>
</ul>
</div>
<div>
<p class="title upper">Others</p>
<ul>
<li>Careers</li>
<li>Press</li>
<li>Licenses</li>
</ul>
</div>
<div></div>
</div>
<div class="attribution">
Challenge by Frontend Mentor. Coded by Your Name Here.
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>

Answer 1

It seems like this is probably your issue:
main {
transform: translateY(70px);
}