I have noticed a section overlapping issue and I am struggling to figure out the cause. I have attempted using margins and padding to adjust the footer with my .div-wrap, but so far it has not been effective. After searching around, I am still uncertain about what might be causing this problem. Any insights or input would be greatly appreciated. I believe it may be a simple fix that I am currently overlooking. Thank you for your assistance.
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
</style>
<section class="servies">
<div class=" services-container">
<h4 class=" services">
The era of mass marketing is long gone, and today brands must focus on authenticity and reaching their audiences in a non-advertorial manner. I am committed to helping you define your message and share it through various means, including identity and logo design, user experience and interface design, web development, social media marketing, campaign advertising, and e-commerce solutions. Whatever your creative requirements may be, feel free to reach out to schedule an appointment.
</h4>
</div>
</section>
<header>
<h1>
<a href="index.html"><img src="my-logo-01.svg" class="menu"></a>
</h1>
<nav>
<a href="about.html" class="underline menu highlight">About</a>
<a href="services.html" class="underline menu highlight">Services</a>
<a href="contact.html" class="underline menu highlight">Contact</a>
<a href="blog.html" class="underline menu highlight">Blog</a>
</nav>
</header>
<footer>
<div class="footer-container">
<div class="grid-container">
<div class="based">
<h3>
BASED IN <br>
CREAM CITY<br>
<span class="highlight ">MILWAUKEE</span>
<span class="highlight ">WISCONSIN</span>
</h3>
</div>
<div class="follow-me">
<h3>
FOLLOW ME ON<br>
<span class="highlight">INSTAGRAM</span>
<span class="highlight">TWITTER</span>
<span class="highlight">DRIBBLE</span>
<span class="highlight">MEDIUM</span>
</h3>
</div>
<div class="inq">
<h3>
FOR INQUIRIES<br>
<span class="highlight">HI@WORKBY</span><br><span class="highlight">CHRIS.ME</span>
</h3>
</div>
<div class="signup">
<h3>
SIGN UP FOR MY<br> NEWS LETTER
<form action="https://superhi1.createsend.com/t/j/s/vtikrl/" method="post" id="subForm" class="sign-up">
<input placeholder="Email" id="fieldEmail" name="cm-vtikrl-vtikrl" type="email" required class="email-input">
<input type="submit" value="Submit" class="submit">
</form>
</h3>
</div>
</div>
</div>
</footer>
`
h4 {
font-size: 48px;
line-height: 1.2;
}
section .services {
height: 100vh;
margin: auto;
}
.services-container {
padding-bottom: 112px;
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
footer {
height: 100vh;
margin-top: 112px;
padding: 64px;
}
.footer-container {
margin: auto;
max-width: 900px;
}
h3 {
font-size: 56px;
line-height: 1.2;
font-weight: 800;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 80px 80px;
grid-template-areas: "based follow-me" "inq signup";
}
.signup h3 {
font-size: 48px;
}
form, .signup {
font-size: 35px;
}
input[type=button], input[type=submit], input[type=reset] {
background-color: #000000;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
width: 100%;
}