css-如何修复页脚和html正文结尾之间的间隙？

我在页面中添加了一个页脚，但由于某些原因，页脚和正文结尾之间存在间隙。我不知道如何解决这个问题。我已经制作了很多没有这个问题的网页。

我已经包含了我创建的HTML和CSS。我找不到我的代码有任何问题。

HTML:

* {
    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>