Removing white gap on html body

Question

Practically I got the page layout for this project setup. There is a big white gap after the last div cardsaccepted. It's a big empty gap that it makes scrolling down. I believe it could possibly be a margin issue but can't identified on where. Any idea on how to remove this big gap without affecting the layout. Here's the code

body {
  background: rgba(117, 112, 112, 0.06);
}

.main-container {
  width: 960px;
  margin: auto;
  position: relative;
  background-color: white;
}

.headercontainer {
  margin-top: 20px;
  background-color: #ddf5ce;
}

.topfiller {
  background-image: url("../Images/Aztec2white.jpg");
  background-repeat: repeat-x;
}

img.RestLogo {
  position: relative;
  left: 7px;
}

.btmfiller {
  background-image: url("../Images/Aztec2white.jpg");
  background-repeat: repeat-x;
  margin-bottom: -5px;
}

.pic-filler {
  margin-top: -25px;
}

#pic-filler {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#mainMotto {
  font-family: 'Rock Salt', cursive;
  color: rgba(11, 123, 40, 0.86);
  font-size: 110%;
  letter-spacing: -1.5px;
  position: absolute;
  top: 35px;
  left: 290px;
}

.headercontact p {
  display: block;
  position: absolute;
  top: 30px;
  left: 780px;
  line-height: 60%;
  font-family: 'Frank Ruhl Libre', sans-serif;
  font-size: 87%;
  color: brown;
}

.headercontact span {
  font-weight: bold;
  font-size: 130%;
}

.headercontact a {
  text-decoration: none;
  font-family: 'Frank Ruhl Libre', sans-serif;
  color: #921f0c;
}

.headerschedule {
  display: block;
  position: absolute;
  left: 325px;
  top: 120px;
}

.headerschedule p {
  line-height: 70%;
  font-size: 20px;
  color: #0B3504;
  font-size: 95%;
  font-weight: 600;
}


/*social media icons*/

.socialmedia {
  position: absolute;
  top: 145px;
  left: 800px;
  letter-spacing: 2px;
}

.socialmedia a {
  display: inline-block;
}


/*Navigation Menu*/

.navigationbar {
  margin: 0px;
  border-top: 1px solid rgba(106, 180, 83, 0.82);
}

.navigationbar ul {
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}

.navigationbar li {
  display: inline-block;
  margin-top: 10px;
  list-style: none;
  margin-right: 15px;
  padding: 10px 15px;
  font-family: 'Indie Flower', cursive;
  font-size: 120%;
  text-transform: uppercase;
  background-color: #e0ecd2;
  border: 2px solid rgba(106, 180, 83, 0.82);
  border-radius: 16px;
}

.navigationbar a {
  display: block;
  color: #928c1e;
  text-decoration: none;
}

nav li:hover {
  background: #d0edaf;
}

@media screen and (max-width: 700px) {
  .navigationbar li {
    width: 50%;
  }
}


/*End of Navigation Menu*/


/*Body content*/

.bodytxtcontent {
  padding-left: 20px;
  padding-right: 20px;
  text-align: justify;
}

.body-paragraph {
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  font-family: 'Cormorant Upright', serif;
  font-size: 150%;
  line-height: 130%;
  color: rgba(38, 150, 44, 0.9);
  font-weight: bold;
}

.bodyimg {
  max-width: 45%;
  box-sizing: border-box;
  float: right;
  margin: 7px 0 0 15px;
}


/*Not showing next to body-paragraph*/

#cantinapic {
  max-width: 100%;
  height: auto;
}


/*end of body content*/


/*Table content*/

.tablecontainer {
  background-image: url(../Images/Tacos-de-Barbacoa1.png);
  background-repeat: no-repeat;
  background-size: cover;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  margin-top: 25px;
  width: 100%;
}

table td {
  padding: 10px;
  border: 2px solid green;
  font-size: 18px;
  color: #11100f;
  text-align: center;
}

tr .items-header {
  font-weight: bold;
  text-align: right;
  font-size: 22px;
  padding: 10px;
}


/*End of Table content*/


/*Contact Us*/

form {
  background-color: #efe9e9;
  padding-top: 15px;
  padding-left: 15px;
  padding-bottom: 15px;
  border-radius: 7px;
}

.First-Half {
  width: 60%;
  float: left;
  margin-top: 30px;
}

.First-Half h2 {
  color: #2f2fa5;
  text-align: center;
  margin-right: 20px;
}

address {
  line-height: 75%;
  font-size: 20px;
  text-align: center;
}

.First-Half p {
  text-align: center;
  font-size: 20px;
  font-style: italic;
}

.First-Half a {
  text-decoration: none;
  margin-left: 12em;
  font-size: 17px;
  font-style: italic;
}

iframe {
  margin-top: 10px;
  margin-left: 5em;
  box-shadow: 10px 10px 5px #aaaaaa;
  border-radius: 5px;
}

table .table-schedule td {
  text-align: left;
  border: none;
}

.days {
  width: 25%;
  font-weight: bolder;
}

.time {
  width: 75%;
}

.Second-Half {
  width: 35%;
  float: left;
  margin-top: 30px;
}

.Second-Half h3 {
  color: #443c3e;
  line-height: 87%;
}

label {
  font-family: 'Frank Ruhl Libre', sans-serif;
}

.hidden-label {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
}

input[type="text"],
input[type="tel"],
input[type="email"] {
  display: block;
  box-sizing: border-box;
  margin: 10px;
  padding: 10px 10px;
  font-family: 'Frank Ruhl Libre', sans-serif;
  font-size: 100%;
  border: 1px solid #CDCDCD;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
  border: 1px solid #CDCDCD;
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .15);
}

input[type="submit"] {
  display: block;
  width: 60%;
  box-sizing: border-box;
  margin: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  background-color: #9b8181;
  border: 1px solid #9b8181;
  border-radius: 3px;
  font-family: 'Frank Ruhl Libre', sans-serif;
  font-size: 100%;
}

input[type="submit"]:focus,
input[type="submit"]:hover {
  border: 1px solid #CDCDCD;
  background-color: rgba(155, 129, 129, 0.84)
}

textarea {
  display: block;
  box-sizing: border-box;
  margin: 10px;
  border: 1px solid #CDCDCD;
  border-radius: 3px;
}

textarea:focus {
  border: 1px solid #CDCDCD;
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .15);
}


/*End of Contact Us*/


/*footer section*/

#footer {
  width: 960px;
  margin-top: 100%;
  padding: 5px;
  text-align: center;
  font-size: 18px;
  background-color: #e6f9da;
}

.cardsaccepted {
  width: 725px;
  margin: 10px 15px;
}

#copyright {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #9c9898;
}

#cards-accepted {
  max-width: 35%;
  height: auto;
}

.cards-paragraph p {
  font-family: 'Frank Ruhl Libre', sans-serif;
  font-size: 85%;
  font-weight: bold;
}

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

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Taqueria El Perico Loco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Custom styles for this template -->


  <link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cormorant+Upright" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
  <link href="CSS/style.css" rel="stylesheet">
</head>

<body>

  <div class="main-container">
    <div class="headercontainer">
      <div class="topfiller">
        <img src="Images/Aztec2white.jpg">
        <!--Needs to be background img and repeat x-->

      </div>
      <!--end of topfiller div-->

      <a href="index.html"><img class="RestLogo" src="Images/Pericos-Restaurant.jpg" alt="El Perico Loco" width="135" height="auto"></a>

      <div class="restaurantmotto">

        <h1 id="mainMotto">Authentic Mexican Food with Tradition</h1>

      </div>
      <!--end of restaurantmotto-->

      <div class="headercontact">

        <p><span>Come visit us at</span>
          <br></br>
          150 Coronado Ave
          <br></br>
          Daly City, CA 94051
          <br></br>
          650.758.1000
          <br></br>
          <a href="mailto:info@elpericoloco.com">info@elpericoloco.com</a></p>

      </div>
      <!--end of headercontact-->

      <div class="headerschedule">

        <p>Sundays thru Thursdays: 11am - 11pm
          <br></br>
          Fridays & Saturdays: 11am to midnight</p>

      </div>
      <!--end of headerschedule-->

      <div class="socialmedia">
        <a href="http://www.facebook.com"><img src="Images/apple-touch-icon-precomposed.png" width="30" height="30"></a>
        <a href="http://www.twitter.com"><img src="Images/Twitter_icon.png" width="30" height="30"></a>
        <a href="http://www.google.com"><img src="Images/GooglePlus-logos-02.png" width="30" height="30"></a>
      </div>
      <!--end of div social media-->

      <div class="btmfiller">
        <img src="Images/Aztec2white.jpg">
        <!--Needs to be background img and repeat x-->

      </div>
      <!--end of btmfiller div-->
    </div>
    <!--end of headercontainer div-->



    <nav class="navigationbar">
      <ul class="group">
        <li><a href="index.html">Home</a></li>
        <li><a href="Menu.html">Menu</a></li>
        <li><a href="Contact.html">Contact</a></li>
      </ul>
    </nav>


    <div class="bodytxtcontent">
      <br></br>
      <h3></h3>
      <div class="pic-filler">
        <img id="pic-filler" src="Images/static1.squarespace.com.png" alt="pic filler">

      </div>
      <!--end of pic-filler div-->

      <div class="body-paragraph">

        <div class="bodyimg">

          <img id="cantinapic" src="Images/cantinabqt.jpg" alt="Inside Restaurant">
        </div>
        <!--end of bodyimg div-->

        <p>Growing up in La Estancia de Los Lopez, Nayarit Mexico and being the oldest of seven, I gravitate to one of the family businesses. My father's love of butchering and breaking down carcass, turn into a taco stand in front of our house. Being my
          father's apprentice, I would rush home from school to cook all our meats and learn his cooking skills. Although, I loved learning new cooking skills the best part of it, was spending one on one time with my father.</p>

        <p>As I spent more and more time in the kitchen, I began to realize how much flavor meant to me. I found myself many times creating new recipes that one day I dreamed of putting out in my restaurant. A dream that for many years seemed surreal, until
          I meet my wife who helped develop the menu that has made us who we are today in the restaurant industry.</p>

        <p>We started in 1999 as a street vendor on East 14th and 42nd in Oakland and progressively brought our Mexican flavors to our home town in San Leandro in 2007.</p>
      </div>
      <!--end of body-paragraph-->



    </div>
    <!--End of bodytxtcontent-->


    <div class="cardsaccepted">

      <img id="cards-accepted" src="Images/all cards accepted.jpg" alt="Cards Accepted image">

      <div class="cards-paragraph">
        <p>We proudly accept this cards. No Minimum!</p>
      </div>
      <!--end of cards-paragraph-->

    </div>
    <!--end of cardsacceped div. It wraps img cards id=cards-acepted and cards-paragraph -->



    <footer id="footer">

      <span id="copyright"> &copy;All Rights Reserved 2016</span>
    </footer>

  </div>
  <!--End of main-container div-->



</body>



</html>

Answer 1

You might want to reset some margin effects. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

You may set the footer in fixed or absolute position down the bottom . Off the flow, you need to add some space (padding or margin) to the last element to avoid footer overlap it.

example:

body {
  background: rgba(117, 112, 112, 0.06);
  margin:0
}

.main-container {
  width: 960px;
  margin: auto;
  position: relative;
  background-color: white;
  padding-top:20px;
}

.headercontainer {
  /*margin-top: 20px;*/
  background-color: #ddf5ce;
}

.topfiller {
  background-image: url("../Images/Aztec2white.jpg");
  background-repeat: repeat-x;
}

img.RestLogo {
  position: relative;
  left: 7px;
}

.btmfiller {
  background-image: url("../Images/Aztec2white.jpg");
  background-repeat: repeat-x;
  margin-bottom: -5px;
}

.pic-filler {
  margin-top: -25px;
}

#pic-filler {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#mainMotto {
  font-family: 'Rock Salt', cursive;
  color: rgba(11, 123, 40, 0.86);
  font-size: 110%;
  letter-spacing: -1.5px;
  position: absolute;
  top: 35px;
  left: 290px;
  margin:0
}

.headercontact p {
  display: block;
  position: absolute;
  top: 30px;
  left: 780px;
  line-height: 60%;
  font-family: 'Frank Ruhl Libre', sans-serif;
  font-size: 87%;
  color: brown;
}

.headercontact span {
  font-weight: bold;
  font-size: 130%;
}

.headercontact a {
  text-decoration: none;
  font-family: 'Frank Ruhl Libre', sans-serif;
  color: #921f0c;
}

.headerschedule {
  display: block;
  position: absolute;
  left: 325px;
  top: 120px;
}

.headerschedule p {
  line-height: 70%;
  font-size: 20px;
  color: #0B3504;
  font-size: 95%;
  font-weight: 600;
}


/*social media icons*/

.socialmedia {
  position: absolute;
  top: 145px;
  left: 800px;
  letter-spacing: 2px;
}

.socialmedia a {
  display: inline-block;
}


/*Navigation Menu*/

.navigationbar {
  margin: 0px;
  border-top: 1px solid rgba(106, 180, 83, 0.82);
}

.navigationbar ul {
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}

.navigationbar li {
  display: inline-block;
  margin-top: 10px;
  list-style: none;
  margin-right: 15px;
  padding: 10px 15px;
  font-family: 'Indie Flower', cursive;
  font-size: 120%;
  text-transform: uppercase;
  background-color: #e0ecd2;
  border: 2px solid rgba(106, 180, 83, 0.82);
  border-radius: 16px;
}

.navigationbar a {
  display: block;
  color: #928c1e;
  text-decoration: none;
}

nav li:hover {
  background: #d0edaf;
}

@media screen and (max-width: 700px) {
  .navigationbar li {
    width: 50%;
  }
}


/*End of Navigation Menu*/


/*Body content*/

.bodytxtcontent {
  padding-left: 20px;
  padding-right: 20px;
  text-align: justify;
}

.body-paragraph {
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  font-family: 'Cormorant Upright', serif;
  font-size: 150%;
  line-height: 130%;
  color: rgba(38, 150, 44, 0.9);
  font-weight: bold;
}

.bodyimg {
  max-width: 45%;
  box-sizing: border-box;
  float: right;
  margin: 7px 0 0 15px;
}


/*Not showing next to body-paragraph*/

#cantinapic {
  max-width: 100%;
  height: auto;
}


/*end of body content*/


/*Table content*/

.tablecontainer {
  background-image: url(../Images/Tacos-de-Barbacoa1.png);
  background-repeat: no-repeat;
  background-size: cover;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  margin-top: 25px;
  width: 100%;
}

table td {
  padding: 10px;
  border: 2px solid green;
  font-size: 18px;
  color: #11100f;
  text-align: center;
}

tr .items-header {
  font-weight: bold;
  text-align: right;
  font-size: 22px;
  padding: 10px;
}


/*End of Table content*/


/*Contact Us*/

form {
  background-color: #efe9e9;
  padding-top: 15px;
  padding-left: 15px;
  padding-bottom: 15px;
  border-radius: 7px;
}

.First-Half {
  width: 60%;
  float: left;
  margin-top: 30px;
}

.First-Half h2 {
  color: #2f2fa5;
  text-align: center;
  margin-right: 20px;
}

address {
  line-height: 75%;
  font-size: 20px;
  text-align: center;
}

.First-Half p {
  text-align: center;
  font-size: 20px;
  font-style: italic;
}

.First-Half a {
  text-decoration: none;
  margin-left: 12em;
  font-size: 17px;
  font-style: italic;
}

iframe {
  margin-top: 10px;
  margin-left: 5em;
  box-shadow: 10px 10px 5px #aaaaaa;
  border-radius: 5px;
}

table .table-schedule td {
  text-align: left;
  border: none;
}

.days {
  width: 25%;
  font-weight: bolder;
}

.time {
  width: 75%;
}

.Second-Half {
  width: 35%;
  float: left;
  margin-top: 30px;
}

.Second-Half h3 {
  color: #443c3e;
  line-height: 87%;
}

label {
  font-family: 'Frank Ruhl Libre', sans-serif;
}

.hidden-label {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
}

input[type="text"],
input[type="tel"],
input[type="email"] {
  display: block;
  box-sizing: border-box;
  margin: 10px;
  padding: 10px 10px;
  font-family: 'Frank Ruhl Libre', sans-serif;
  font-size: 100%;
  border: 1px solid #CDCDCD;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
  border: 1px solid #CDCDCD;
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .15);
}

input[type="submit"] {
  display: block;
  width: 60%;
  box-sizing: border-box;
  margin: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  background-color: #9b8181;
  border: 1px solid #9b8181;
  border-radius: 3px;
  font-family: 'Frank Ruhl Libre', sans-serif;
  font-size: 100%;
}

input[type="submit"]:focus,
input[type="submit"]:hover {
  border: 1px solid #CDCDCD;
  background-color: rgba(155, 129, 129, 0.84)
}

textarea {
  display: block;
  box-sizing: border-box;
  margin: 10px;
  border: 1px solid #CDCDCD;
  border-radius: 3px;
}

textarea:focus {
  border: 1px solid #CDCDCD;
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .15);
}


/*End of Contact Us*/


/*footer section*/

#footer {
  position:fixed;
  width: 960px;
  /*margin-top: 100%;*/
  bottom:0;
  padding: 5px;
  text-align: center;
  font-size: 18px;
  background-color: #e6f9da;
}

.cardsaccepted {
  width: 725px;
  margin: 10px 15px 50px;
}

#copyright {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #9c9898;
}

#cards-accepted {
  max-width: 35%;
  height: auto;
}

.cards-paragraph p {
  font-family: 'Frank Ruhl Libre', sans-serif;
  font-size: 85%;
  font-weight: bold;
}

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

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Taqueria El Perico Loco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Custom styles for this template -->


  <link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cormorant+Upright" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
  <link href="CSS/style.css" rel="stylesheet">
</head>

<body>

  <div class="main-container">
    <div class="headercontainer">
      <div class="topfiller">
        <img src="Images/Aztec2white.jpg">
        <!--Needs to be background img and repeat x-->

      </div>
      <!--end of topfiller div-->

      <a href="index.html"><img class="RestLogo" src="Images/Pericos-Restaurant.jpg" alt="El Perico Loco" width="135" height="auto"></a>

      <div class="restaurantmotto">

        <h1 id="mainMotto">Authentic Mexican Food with Tradition</h1>

      </div>
      <!--end of restaurantmotto-->

      <div class="headercontact">

        <p><span>Come visit us at</span>
          <br></br>
          150 Coronado Ave
          <br></br>
          Daly City, CA 94051
          <br></br>
          650.758.1000
          <br></br>
          <a href="mailto:info@elpericoloco.com">info@elpericoloco.com</a></p>

      </div>
      <!--end of headercontact-->

      <div class="headerschedule">

        <p>Sundays thru Thursdays: 11am - 11pm
          <br></br>
          Fridays & Saturdays: 11am to midnight</p>

      </div>
      <!--end of headerschedule-->

      <div class="socialmedia">
        <a href="http://www.facebook.com"><img src="Images/apple-touch-icon-precomposed.png" width="30" height="30"></a>
        <a href="http://www.twitter.com"><img src="Images/Twitter_icon.png" width="30" height="30"></a>
        <a href="http://www.google.com"><img src="Images/GooglePlus-logos-02.png" width="30" height="30"></a>
      </div>
      <!--end of div social media-->

      <div class="btmfiller">
        <img src="Images/Aztec2white.jpg">
        <!--Needs to be background img and repeat x-->

      </div>
      <!--end of btmfiller div-->
    </div>
    <!--end of headercontainer div-->



    <nav class="navigationbar">
      <ul class="group">
        <li><a href="index.html">Home</a></li>
        <li><a href="Menu.html">Menu</a></li>
        <li><a href="Contact.html">Contact</a></li>
      </ul>
    </nav>


    <div class="bodytxtcontent">
      <br></br>
      <h3></h3>
      <div class="pic-filler">
        <img id="pic-filler" src="Images/static1.squarespace.com.png" alt="pic filler">

      </div>
      <!--end of pic-filler div-->

      <div class="body-paragraph">

        <div class="bodyimg">

          <img id="cantinapic" src="Images/cantinabqt.jpg" alt="Inside Restaurant">
        </div>
        <!--end of bodyimg div-->

        <p>Growing up in La Estancia de Los Lopez, Nayarit Mexico and being the oldest of seven, I gravitate to one of the family businesses. My father's love of butchering and breaking down carcass, turn into a taco stand in front of our house. Being my
          father's apprentice, I would rush home from school to cook all our meats and learn his cooking skills. Although, I loved learning new cooking skills the best part of it, was spending one on one time with my father.</p>

        <p>As I spent more and more time in the kitchen, I began to realize how much flavor meant to me. I found myself many times creating new recipes that one day I dreamed of putting out in my restaurant. A dream that for many years seemed surreal, until
          I meet my wife who helped develop the menu that has made us who we are today in the restaurant industry.</p>

        <p>We started in 1999 as a street vendor on East 14th and 42nd in Oakland and progressively brought our Mexican flavors to our home town in San Leandro in 2007.</p>
      </div>
      <!--end of body-paragraph-->



    </div>
    <!--End of bodytxtcontent-->


    <div class="cardsaccepted">

      <img id="cards-accepted" src="Images/all cards accepted.jpg" alt="Cards Accepted image">

      <div class="cards-paragraph">
        <p>We proudly accept this cards. No Minimum!</p>
      </div>
      <!--end of cards-paragraph-->

    </div>
    <!--end of cardsacceped div. It wraps img cards id=cards-acepted and cards-paragraph -->



    <footer id="footer">

      <span id="copyright"> &copy;All Rights Reserved 2016</span>
    </footer>

  </div>
  <!--End of main-container div-->



</body>



</html>

Answer 2

An easy way to debug a display issue like this is:

• load the page
• right click on any element
• display the STYLES in the inspection window (google for how if you don't know what that means)
• display the web page window and the inspection window at the same time, side by side
• arrow up and down the html elements in the inspection window, expanding them so you can get in to the level you need to. The html window will colorize to show where your focus is.
• when the 'wrong' display is 'lit up', look back at the inspection window and examine the css there to figure out what the problem is.

Answer 3

just remove margin-top: 100% from #footer.

why do you need that margin anyway?

Answer 4

Your footer has a margin-top: 100%, which causes the empty space. Remove that and the space will be gone.

I guess you want something like

#footer {
  position: fixed;
  bottom: 0;
}

or similar.