How to fix the gap between footer and end of html body?

Question

I added a footer to my page but for some reason there is a gap between the footer and the ending of the body. I am not sure how to fix this issue. I have made many webpages without this issue.

I have included the HTML and CSS from what I have created. I cannot find any issue with the code I have.

 * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-size: 20px; font-weight: 300; margin: 0 0 var(--header-height) 0; } section { margin-top: 3rem; }.coloredSection { background-color: var(--pale-green); color: white; }.container { margin-left: 1.5rem; margin-right: 1.5rem; }.grid { display: grid; gap: 1.5rem; }

 <footer id="contact" class="coloredSection contact"> <div class="row align-items-center projects container"> <div> <h1>Contact Me</h1> </div> <div class="contactLinks" id="contacts"> <a id="profile-link" href="https://github.com/" target="_blank" class="btn contactDetails"><i class="fab fa-github"></i> GitHub</a> <a href="https://twitter.com/" target="_blank" class="btn contactDetails"><i class="fab fa-twitter"></i> Twitter</a> <a href="https://www.linkedin.com/in/" target="_blank" class="btn contactDetails"><i class="fab fa-linkedin"></i> LinkedIn</a> <a href="mailto:" class="btn contactDetails"><i class="fas fa-envelope"></i> Email me</a> </div> <div class="attribution"> ©2022 | Designed and Coded by Kianna Hendricks </div> </div> </footer> <!-- End Contact --> </body> </html>

Image:

Answer 1

It seems you have set a margin-bottom for the body:

var(--header-height)

body {
    font-size: 20px;
    font-weight: 300;
    margin: 0 0 var(--header-height) 0; 
}

Change margin to margin:0; and it will work fine.

Answer 2

I figured out the issue. I accidently added the projects class to the contact row div. After removing it, the gap went away.