title: my footer doesn't stay at the bottom of the site when I zoom out the site
body: <p>Pls help me, I am making a site and my footer isn't staying at the bottom, when I zoom out the site. I'm a beginner so the code can be a little messy. </p>
  
  <p><a href="https://i.stack.imgur.com/GE9nm.jpg" rel="nofollow noreferrer">as you can see, the footer doesn't stay at the bottom, I have searched here for people with a similar problem with the code and I found some. And I tried some of the solutions, but none of them worked for me.</a></p>
  
  <p>I think it doesn't work because there's something else wrong with my css, but I just cant figure it out.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html{
  box-sizing:border-box;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  }
  
  *,*:before,*:after{
      box-sizing:inherit
  }
  
  body{
      margin: 0;
      overflow-x: hidden;
      background-color: #f6f6f6;
  }
  
  ul {
          padding: 4px 8px;
          float: right;
  }
  
  a.nav-button {
      padding: 8px 16px;
      text-decoration: none;
      color: black;
      letter-spacing: 4px;
      border: none;
      outline: none;
      font-family: Verdana,sans-serif;
      font-size: 15px;
      line-height: 1.5;
  }
  
  a.nav-button:hover {
      background-color: #cccccc;
  }
  
  img.logo{
      padding-top: 14px;
      height: 50px;
      float:left;
  }
  
  div.menu{
      position:fixed;
      width:100%;
      z-index:1;
      background-color: #ffffff;
  }
  
  div.front_img{
      padding-top:500;
      vertical-align: middle;
      display:inline-block;
      max-width:100%;
      width: 100%;
      max-height: 60%;
      position: relative;
      background-image: url(../images/front_image.jpg);
      background-size: cover;
      left:50%;
      top:0;
      transform:translate(-50%,0%);
      -ms-transform:translate(-50%,0%);
  }
  
  div.webpage {
      max-width:980px;
      margin:auto;
  }
  
  div.container {
      padding:0.01em 16px;
      padding-top:32px;
      padding-bottom: 32px;
      max-width: 100%;
      position: relative;
      left:50%;
      top:0;
      transform:translate(-50%,0%);
      -ms-transform:translate(-50%,0%);
      background-color: #f6f6f6;
  }
  
  div.article {
      padding:0.01em 16px;
      padding-top:32px;
      padding-bottom: 32px;
      max-width: 100%;
      position: relative;
      left:50%;
      top:0;
      transform:translate(-50%,0%);
      -ms-transform:translate(-50%,0%);
      background-color: #f6f6f6;
  }
  
  div.h3-container {
     border-bottom:1px solid #ccc;
     width:100%;
  }
  
  h3 {
      font-size: 24px;
      font-family: "Segoe UI",Arial,sans-serif;
      font-weight: 400;
      margin: 10px 0;
  }
  
  p {
      font-family: Verdana,sans-serif;
      font-size: 15px;
      line-height: 1.5;
      display: block;
      -webkit-margin-before: 1em;
      -webkit-margin-after: 1em;
      -webkit-margin-start: 0px;
      -webkit-margin-end: 0px;
  }
  
  div.footer {
     position: relative;
     padding-top: 6;
     padding-bottom: 6;
     padding-right: 8;
     width: 100%;
     text-align: right;
     background-color: black;   
     color: goldenrod;
  }
  
  div.footer, a{
      color: goldenrod;
  }
  
  div.footer-container {
      position: relative;
      padding:0.01em 16px;
      padding-top:32px;
      padding-bottom: 32px;
      max-width: 100%;
      width: 100%;
      background-color: black;
      color:goldenrod;
      left:50%;
      top:0;
      transform:translate(-50%,0%);
      -ms-transform:translate(-50%,0%);
      border-bottom:1px solid goldenrod;
  }
  
  div.footer-background{
      background-color: black;
      overflow: hidden;
  }
   
  div.leverancier-wrap {
      padding-left: 22;
      background-color: white;
  }
  
  div.footer-content {
      // tried position:fixed; here but didnt work :c 
  }
      
  HTML</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="footer-content"&gt;
      &lt;div class="container" style="max-width:1564px"&gt;
          &lt;div class="h3-container" id="intoduction"&gt;
               &lt;h3 class="Welcome-title"&gt;&lt;img src="images/location_icon.png" height="30" length="20" hspace="20"/&gt;Installatietechniek Haaglanden bevindt zich hier.&lt;/h3&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
      &lt;style&gt;
       #map {
         width: 100%;
         height: 400px;
         background-color: grey;
         border-bottom: 5pt solid black;
       }
      &lt;/style&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
          &lt;script&gt;
            function initMap() {
              var uluru = {lat: 52.0442081, lng: 4.3370828};
              var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 17,
                center: uluru
              });
              var marker = new google.maps.Marker({
                position: uluru,
                map: map
              });
            }
          &lt;/script&gt;
          &lt;script async defer
          src="https://maps.googleapis.com/maps/api/js?key=[aint getting mah map]&amp;callback=initMap"&gt;
          &lt;/script&gt;
  
      &lt;div class="leverancier-wrap"&gt;
        &lt;img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide1.jpg"  height="30" width="300"&gt;
        &lt;img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide2.jpg"  height="30" width="300"&gt;
        &lt;img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide3.jpg"  height="30" width="300"&gt;
        &lt;img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide4.jpg"  height="30" width="300"&gt;
      &lt;/div&gt;
          &lt;div class="footer-background"&gt;
              &lt;div class="footer-container" style="max-width:1564px"&gt;
                  &lt;div class="footer-text"&gt;
                      &lt;h3&gt;Contactgegevens&lt;/h3&gt;
                      &lt;p&gt;Installatietechniek Haaglanden&lt;span style="display:inline-block; width: 280px;"&gt;&lt;img src="images/telphone-icon.png" height="16" length="8" hspace="259"/&gt;&lt;/span&gt;070 7620180&lt;/p&gt;
                      &lt;p&gt;Burgemeester Elsenlaan 321&lt;span style="display:inline-block; width: 297px;"&gt;&lt;img src="images/mail-icon.png" height="16" length="8" hspace="276"/&gt;&lt;/span&gt;info@installatietechniekhaaglanden.nl&lt;/p&gt;
                      &lt;p&gt;2282 MZ Rijswijk&lt;a href="https://www.facebook.com/installatietechniekhaaglanden/"&gt;&lt;img src="images/facebook-icon.png" height="16" length="8" hspace="362"/&gt;&lt;/a&gt;&lt;/p&gt; 
                  &lt;/div&gt;     
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;div class="footer"&gt;
          &lt;p&gt;Copyright © installatietechniekhaaglanden.nl. Designed by &lt;a href=""&gt;ajeeth&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;    </code></pre>
  </div>
  </div>
  </p>