Why does my homepage have white space under it?

Question

I created a website that uses buttons to move to the next page and everything works fine. Except on the homepage where there is a lot of white space under all of the content. I tried making the overflow hidden but that blocks the button that you have to click to go to the next page. I would like the height of the first page to be equal to the users screen height, and if some content can't fit then allow them to scroll down.

Here is the codepen: https://codepen.io/Lukie/pen/eWobYa

// If user clicks on .downBtn
function scrollDown() {
  $(".home").removeClass("slideInLeft");
  $(".home").addClass("slideOutUp");
  
  $(".content").css("visibility", "visible");
  $(".content").removeClass("slideOutDown");
  $(".content").addClass("slideInUp");
}

// If user clicks on .upBtn
function scrollUp() {
  $(".home").removeClass("slideOutUp");
  $(".home").addClass("slideInDown");
  $(".home").css("visibility", "visible");
  
  $(".content").removeClass("slideInUp");
  $(".content").addClass("slideOutDown");
}

body {
  background-color: white;
  overflow-x: hidden;
  transition: all .6s ease-in-out;
}

.home {
  top: 0;
  visibility: visible;
}

.content {
  position: absolute;
  top: 0;
  visibility: hidden;
}

.logo {
  margin: 4% 0 14% 0;
}

.downBtn {
  position: relative;
  color: orange;
  transition: all .3s ease-in-out;
}

.downBtn:hover {
  transform: scale(1.2);
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.upBtn {
  position: relative;
  color: black;
  margin: 4% 0 0 8%;
  transition: all .3s ease-in-out;
}

.upBtn:hover {
  transform: scale(1.2);
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.car {
  transform: scale(.8); 
}

p {
  font-family: Raleway;
  font-size: 14px;
  line-height: 180%;
  color: black;
  margin: 0 22% 10% 18%;
  padding: 10px;
  border-left: 2px solid #191a1c;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Home Page -->
<div class="container-fluid home animated slideInLeft">
  <!-- Tesla Logo -->
  <div class="row">
    <div class="col-md-12">
      <a href="https://www.tesla.com/" target="_blank"><img class="logo mx-auto d-block" src="http://resizeimage.net/mypic/TkJbULc2TToQO5jb/Nyv35/tesla.png" alt="Tesla Logo"></a>
    </div>
  </div>
  <!-- Scroll Down Button -->
  <div class="row">
    <div class="col-md-12 text-center">
      <i class="downBtn fa fa-5x fa-angle-down" aria-hidden="true" onclick="scrollDown()"></i>
    </div>
  </div>
</div>

<!-- Content Page -->
<div class="container-fluid content animated slideOutDown">
  <!-- Scroll Up Button -->
  <div class="row">
    <div class="col-md-12 text-left">
      <i class="upBtn fa fa-5x fa-angle-up" aria-hidden="true" onclick="scrollUp()"></i>
    </div>
  </div>
  <!-- Car Image -->
  <div class="row">
    <div class="col-md-12">
      <img class="car mx-auto d-block" src="https://www.tesla.com/tesla_theme/assets/img/modals/model-select-models.png?20160811" alt="Tesla" </div>
    </div>
    <!-- Paragraph about Tesla -->
    <div class="row">
      <div class="col-md-12">
        <p>Tesla’s mission is to accelerate the world’s transition to sustainable energy. Since our founding in 2003, Tesla has broken new barriers in developing high-performance automobiles that are not only the world’s best and highest-selling pure electric
          vehicles—with long range and absolutely no tailpipe emissions—but also the safest, highest-rated cars on the road in the world. Beyond the flagship Model S sedan as well as the falcon-winged door Model X sports utility vehicle, we plan on launching
          our new Model 3 sedan later this year at a base price of $35,000 that we expect to truly propel electric vehicles into the mainstream.</p>
      </div>
    </div>
  </div>
</div>

Answer 1

This is because you working with visibility ... change it to display : block and display : none you can take a look at What is the difference between visibility:hidden and display:none?