Whitespace beneath <sections> parallax effect

I have a problem doing my first project with parallax. So I have 5 sections and the hero image in the landing page is Parallax (using the Rellax Javscript which can be found in the internet):

<body>

<section id="home"> 
    <img src="media/images/Parallax/_Parallax_Layer_01.png" alt="Background">
    <img src="media/images/Parallax/_Parallax_Layer_02.png" alt="Middleground" class="middleground rellax" data-rellax-speed="2">
    <img src="media/images/Parallax/_Parallax_Layer_03.png" alt="Foreground" class="foreground rellax" data-rellax-speed="4">
</section>

<section id="about" class="rellax" data-rellax-speed="4">
......
</section>

<section id="vision" class="rellax" data-rellax-speed="2">
......
</section>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.11.0/rellax.min.js"></script>
<script src="test.js"></script>

</body>

Which shows then the unneeded white space between the section ABOUT and VISION.

CSS:

section {
    width: 100%;
    height: 100vh;
    color: white;
}

#home img {
    position: absolute;
    width: 100%;
}

#about {
    background: #b6dff7;
    z-index: 5;
    display: flex;
}

#vision {
    background: orange;
}

Javascript:

  // Also can pass in optional settings block
  var rellax = new Rellax('.rellax', {
    speed: -2,
    center: false,
    wrapper: null,
    round: true,
    vertical: true,
    horizontal: false
  });

I could also just make everything the same speed scrolling up also the footer, but then I'll have a huge white space beneath the footer. Anyone knows what to do here?

  // Also can pass in optional settings block
  var rellax = new Rellax('.rellax', {
    speed: -2,
    center: false,
    wrapper: null,
    round: true,
    vertical: true,
    horizontal: false
  });

/* Import needed Google fonts */

@import url('https://fonts.googleapis.com/css2?family=Amarante&family=Open+Sans&display=swap');

/* 
    font-family: 'Open Sans', sans-serif;
    font-family: 'Amarante', cursive;
    */

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background: #b6dff7;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

section {
  width: 100%;
  height: 100vh;
  color: white;
}

#home img {
  position: absolute;
  width: 100%;
}

#home img .foreground {}

#about {
  background: #b6dff7;
  z-index: 5;
  display: flex;
}

.about-left {
  display: inherit;
  flex-direction: column;
  width: 50%;
  padding: 3em;
  background: #b6dff7;
  background: linear-gradient(180deg, rgba(182, 223, 247, 1) 0%, rgba(255, 255, 255, 1) 50%);
}

.about-left h1 {
  text-align: center;
}

.about-left .about-left-positioning {
  padding: 2em;
  display: inherit;
  flex-direction: column;
  justify-content: space-around;
}

.about-left .about-team img {
  padding: 2em 0;
  width: 75%;
  height: auto;
  position: relative;
  left: 50%;
  transform: translatex(-50%);
}

.about-left .about-team p {
  padding: 2em 0;
  color: black;
}

.about-right {
  padding: 3em;
  display: inherit;
  flex-direction: column;
  width: 50%;
  background: #b6dff7;
  background: linear-gradient(180deg, rgba(182, 223, 247, 1) 0%, rgba(255, 255, 255, 1) 50%);
}

.about-right h1 {
  text-align: center;
}

.about-right .about-right-positioning {
  padding: 2em 0;
  display: inherit;
  flex-direction: column;
  overflow-y: auto;
  align-items: center;
}

.about-right .about-right-positioning img {
  width: 75%;
  height: auto;
  padding: 2em;
}

#vision {
  background: orange;
}

#current-news {
  background: green;
}

#footer {
  height: 4vh;
  background: red;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vendari - Lost Lands Of Maneira</title>
  <link rel="stylesheet" href="test.css">
</head>

<body>

  <section id="home">
    <h1>This is where the images should be</h1>
  </section>

  <section id="about" class="rellax" data-rellax-speed="4">
    <div class="about-left">

    </div>
    <div class="about-right">

    </div>
  </section>

  <section id="vision" class="rellax" data-rellax-speed="2">
    <div class="vision">

    </div>
  </section>

  <section id="current-news" class="rellax" data-rellax-speed="0">
    <div class="news">

    </div>
  </section>

  <section id="footer">
    <small>Copyright &copy; Vendari</small>
    <div class="social-media">
      <i class="fab fa-facebook"></i>
      <i class="fab fa-twitter"></i>
      <i class="fab fa-instagram"></i>
      <i class="fab fa-github"></i>
    </div>
  </section>

  <!-- Scripts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.11.0/rellax.min.js"></script>
  <script src="test.js"></script>
</body>

</html>

Solution

try to use div's for the rellax class and the sections only as wrappers.

<section>
 <div id="vision" class="rellax" data-rellax-speed="2">
    <div class="vision"> </div>
  </div>
</section>

congrats for Vendari Lost lands of Mainera ;-)