Why does the body of my html page extend way past the footer?

I have a short one page application. The page is not very tall, and when I load the page, the body extends well past the footer. I want the html page to end with the footer but there is white space under the footer about 2-3x the size of the entire page. I am including the relevant html and css code snippets.

 <!DOCTYPE html>
 <html lang="en">
 <head>
 </head>

 <body>
  <section id="landing">
  <header>
    <div class="header__container">
      <div class="header__description">
      </div>
    </div>
  </header>

  <nav>
    <div class="nav__container">
      <!-- <img class="logo" src="./img/wordle__logo.png" alt="" /> -->
      <ul class="nav__links orange">
        <li><a href="#" class="nav__link navy">Home</a></li>
        <li><a href="#" class="nav__link navy">Categories</a></li>
        <li>
          <a href="#" class="nav__link navy nav__link--primary">Account</a>
        </li>
      </ul>
    </div>
  </nav>
</section>

<main>
  <div class="container">
    <section class="middle">
      <section class="picture">
        <div class="picture__container">
          <div class="row">
            <div class="para">
              <p class="text orange" id="title__name">
                Level 1: Name the Event!
              </p>
            </div>
          </div>
          <div class="row">
            <div id="img__container">
              <div id="wrapper">
                <div id="zoom">
                  <img
                    src="<%=puzzle.file %>"
                    class="myPictureClass"
                    id="myPicture"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </section>
  </div>
</main>
<footer>
  <div class="footer__container">
    <div class="row row-column">
      <a href="#">
        <figure class="footer__logo">
          <!-- <img
            src="./assets/Library.svg"
            alt=""
            class="footer__logo--img"
          /> -->
        </figure>
      </a>
      <div class="footer__list">
        <a href="#" class="footer__link cream">Home</a>
        <a href="#" class="footer__link cream no-cursor">About</a>
        <a href="#" class="footer__link cream">Games</a>
        <a href="#" class="footer__link cream no-cursor">Contact</a>
      </div>
      <div class="footer__copyright cream">Copyright © 2022 </div>
    </div>
  </div>
</footer>
</body>
<script>
 window.onload = init();
</script>
</html>

Here is the css:

* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: "Roboto", sans-serif;
}

html {
 scroll-behavior: smooth;
 min-height: 100%;
 border: 6px solid red;
}

body {
 max-width: 100vw;
 min-height: 100vh;
 overflow-x: hidden;
 background-color: green;
 border: 6px solid green;
}

.container {
 background-color: #fafafb;;
 padding: 5px 0;
 width: 100%;
 border: solid 3px black;
}

footer {
 background-color: #15133C;
 height: 100px;
}

.footer__container {
  width: 100%;
  background-color: #15133C;
  padding: 56px 0;
 }

Entire content is about 800-850px, but the scroll bar takes you down another 1500-2000px. It is a node.js application with .ejs files and templating if that information is relevant at all.