title: How to remove white space under webpage
body: <p>I'd like to disable scrolling on my webpage but when I'm on my homepage I can scroll a bit which reveals some white space. I don't know why this happens, can anyone help please? Thanks on advance.</p>
  
  <p><em>Note: You can see and try it when you click on 'Run'.</em></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>  @import url(https://fonts.googleapis.com/css?family=Fjalla+One);
  
    html, body {
      height: 100%;
      width: 100%;
      overflow-x: hidden;
    }
  
    body{
      font-family: 'Fjalla One', sans-serif;
      background: #2C3E50;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      background-repeat: no-repeat;
      
    }
  
    .container{
      margin: auto;
    }
  
  
    h1{
      text-transform: uppercase;
      font-size: 60px;
      letter-spacing: 2px;
      text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
      text-align: center;
      line-height: 60px;
    }
  
  
    .title{
      transform: rotate(-5deg);
      margin: 0 auto;
      display: block;
    }
    
    section {
      width:500px;
      margin:0 auto;
      margin-bottom: 50px;
    }
    .search {
      width: 300px;
      height: 30px;
      background:rgba(50, 50, 50, 0.2);
      border:0px solid #dbdbdb;
      border-radius: 7px;
      text-align: center;
      color: white;
      outline: none;
    }
  
    .btnsearch {
      width: 50px;
      height: 31px;
      border-radius: 0px 7px 7px 0px;
      position:relative;
      border:2px solid #207cca;
      background-color:#207cca;
      color:#fafafa;
      left: -10px;
    }
    .btnsearch:hover  {
      background-color:#fafafa;
      color:#207cca;
    }
  
  
    .icon-div {
      display: inline-block;
      padding: 20px;
    }
  
  
  .icon {
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      box-shadow: 0 0 1px transparent;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: box-shadow, transform;
      transition-property: box-shadow, transform;
      display: table-cell;
      vertical-align: middle;
      color: white;
      border-radius: 35px;
      width: 180px;
      height: 180px;
      text-align: center;
      margin-bottom: 20px;
      }
  
    @media only screen and (max-width: 480px) {
      td {
          float: left;
          margin-right:10px;
          width: 45%;
      }
      td:nth-child(3) {
          clear: left;
      }
      .icon{
        width:100%!important;
        height:100%!important;
        margin-top: 50px;
      }
    }
  
    
    .icon:hover, .icon:focus, .icon:active {
      box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
  
  
    .icontext{
      text-align: center;
      color: white;
      font-size: 30px;
  
    }
  
    .contactbtn{
      margin-right: 15px;
      color: white;
      border: 2px solid black;
      border-radius: 35px;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
      width: 100px;
      height: 30px;
      text-align: center;
      justify-content: center;
      margin-top: 50px;
      box-shadow: 0 0 1px transparent;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: box-shadow, transform;
      transition-property: box-shadow, transform;
  
      background: #007991;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
  
    .contactbtn:hover, .contactbtn:focus, .contactbtn:active {
      box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--Title--&gt;
            &lt;section class="container"&gt;
            &lt;h1&gt;
              &lt;br /&gt;
              &lt;span class="title" &gt;
                 &lt;label style="color:#e55643;"&gt;Burger&lt;/label&gt;&lt;label style="color:#2b9f5e;"&gt;school&lt;/label&gt;
              &lt;/span&gt;
              &lt;span class="title" style="color:#f1c83c;"&gt;afspraken&lt;/span&gt;
            &lt;/h1&gt;
          &lt;/section&gt;
  
          &lt;!--Zoekbalk--&gt;
          &lt;section id="zoekbalk" align="center"&gt;
              &lt;input type="text" placeholder="Zoek iets op..." class="search"/&gt;
              &lt;input type="button" value="Zoek" class="btnsearch"/&gt;
          &lt;/section&gt;
  
          &lt;!--Icoontjes--&gt;
          &lt;div style="text-align: center;"&gt;
  
            &lt;div class="icon-div" style="display: inline-block;"&gt;
              &lt;a href="afspraken.html"&gt;
                &lt;img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/reminders_icon@2x.png" class="icon"/&gt;
              &lt;/a&gt;
              &lt;span class="icontext"&gt;Afspraken&lt;/span&gt;
            &lt;/div&gt;
  
            &lt;div class="icon-div"&gt;
              &lt;img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/fmf_icon@2x.png" class="icon"/&gt;
              &lt;span class="icontext"&gt;Situaties&lt;/span&gt;
            &lt;/div&gt;
  
            &lt;div class="icon-div"&gt;
              &lt;img src="controlcenter.png" class="icon"/&gt;
              &lt;span class="icontext"&gt;Grenzen&lt;/span&gt;
            &lt;/div&gt;
  
            &lt;div class="icon-div"&gt;
              &lt;a href="../Categorie/Categorie.aspx"&gt;&lt;img src="Multitaks.png" class="icon"/&gt;&lt;/a&gt;
              &lt;span class="icontext"&gt;Categoriëen&lt;/span&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;!--Contact--&gt;
          &lt;div style="text-align: center;"&gt;
            &lt;input type="button" value="contact" class="contactbtn"/&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>