title: How can I remove white-space when making a responsive website
body: <p>I am in the process of making this web-design a bit more responsive and would love some advice with where I am going wrong in the CSS of this website in order to stop it having white-space at the bottom and have the footer at an appropriate height after the content.</p>
  <p>Currently I am having to scroll through a lot of white-space in order to see the footer.</p>
  <p>Here is my CSS</p>
  <pre><code>    .carousel-item
                  {
                      height: auto;
                      width: 100%;
                      text-align: center;
                      margin: auto;
                  }
      
                  #carouselFade
                  {
                      background-color: #f9f7fa;
                      height: 20%;
                      border-top: 1px solid #e3dfe6;
                      margin-bottom:-2%;
                      margin-top: 10%;
                      border-bottom: 1px solid #e3dfe6;
                      padding-top: 2%;
      
                  }
      
      footer
      {
          margin-top: 150px;
          flex-shrink: 0;
          text-align: center;
      }
      
      html, body
      {
          height: 100%;
      }
      body
      {
          display: flex;
          flex-direction: column;
      }
      
      #content
      {
          min-height: 30vh;
          height: auto !important;
          height: 100%;
          margin: 0 auto -142px;
          flex: 1 0 auto;
          margin-top: 50px;
          width: 100%;
          padding: 10px;
      }
  </code></pre>
  <p>I have managed to get the videos and images to be responsive and they are moving effectively, however I cannot get rid of the white-space.
  Below is the HTML</p>
  <pre><code>            &lt;style&gt;
                  #video
                  {
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      margin-bottom:3%;
                      margin-top: -6%;
                      margin-right:30%;
                      margin-left: 30%;
                      padding-top: 1%;
                      padding-bottom: 2%;
                      padding-left: 2%;
                      padding-right: 2%;
                      line-height: 0;
                      background-color: #faf7fc;
      
                      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                  }
      
                  h3
                  {
                      font-family: &quot;Brush Script MT&quot;, cursive;
                      margin-bottom: 4px;
                      color: #cac0cc;
                  }
                  .carousel-item
                  {
                      height: auto;
                      width: 100%;
                      text-align: center;
                      margin: auto;
                  }
      
                  #carouselFade
                  {
                      background-color: #f9f7fa;
                      height: 20%;
                      border-top: 1px solid #e3dfe6;
                      margin-bottom:-2%;
                      margin-top: 10%;
                      border-bottom: 1px solid #e3dfe6;
                      padding-top: 2%;
      
                  }
              &lt;/style&gt;
      
          &lt;/head&gt;
      
          &lt;body&gt;
              &lt;header&gt;
      
                  &lt;!--Navigation--&gt;
                  &lt;article class=&quot;top&quot;&gt;
                  &lt;div class=&quot;&quot; id=&quot;line&quot;&gt;
                      &lt;img class=&quot;logo&quot; src=&quot;logo.png&quot; alt=&quot;logo&quot;&gt;
                      &lt;h1&gt;&lt;span class=&quot;lines&quot;&gt;D.P.P&lt;/span&gt;&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;span class=&quot;lines&quot;&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href=&quot;inspiration.html&quot; style=&quot;color: #cac0cc&quot;&gt;Inspiration&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;book.html&quot; style=&quot;color: #cac0cc&quot;&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;author.html&quot; style=&quot;color: #cac0cc&quot;&gt;Author&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;hr&gt;
                      &lt;hr&gt;
                  &lt;/span&gt;
                  &lt;/article&gt;
                  &lt;div class=&quot;spacer&quot;&gt;&amp;nbsp;&lt;/div&gt;
      
      
              &lt;/header&gt;
              &lt;main id=&quot;content&quot;&gt;
      
                  &lt;div id=&quot;video&quot;&gt;
                      &lt;h3&gt; A letter to Max &lt;/h3&gt;
                      &lt;video controls autoplay width=&quot;90%&quot; height=&quot;80%&quot; style=&quot;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);&quot;&gt;
                          &lt;source src=&quot;DianaV.webm&quot; type=&quot;video/webm&quot;&gt;
                          Your browser does not support the video tag.
                      &lt;/video&gt;
                  &lt;/div&gt;
      
                  &lt;div id=&quot;carouselFade&quot; class=&quot;carousel slide carousel-fade&quot; data-ride=&quot;carousel&quot; dataval=&quot;500&quot;&gt;
                  &lt;div class=&quot;carousel-inner&quot; role=&quot;listbox&quot; style=&quot; width:100%; height: 500px;&quot;&gt;
                  &lt;div class=&quot;carousel-item active&quot;&gt;
                      &lt;q&gt;I love you the more in that I believe you had liked me for my own sake and for nothing else&lt;/q&gt;
                      &lt;p class=&quot;author&quot;&gt;- John Keats&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;carousel-item&quot;&gt;
                      &lt;q&gt;But man is not made for defeat. A man can be destroyed but not defeated.&lt;/q&gt;
                      &lt;p class=&quot;author&quot;&gt;- Ernest Hemingway&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;carousel-item&quot;&gt;
                      &lt;q&gt;I have not failed. I've just found 10,000 ways that won't work.&lt;/q&gt;
                      &lt;p class=&quot;author&quot;&gt;- Thomas A. Edison&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleFade&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
                      &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleFade&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
                      &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;/div&gt;
      
              &lt;!-- Preload the images--&gt;
              &lt;script type=&quot;text/javascript&quot;&gt;
                  // preload images
                  var image = new Array();
      
                  function preload(){
                      for (i=0; i&lt; preload.arguments.lenth; i++){
                          images[i] = new Image();
      
                          image[i] = preload.arguments[i];
                      }
                  }
      
                  preload(&quot;logo.png&quot;, &quot;diana mountain.jpg&quot;);
      
                  &lt;/script&gt;
              &lt;/main&gt;
          &lt;/body&gt;
          &lt;footer&gt;
              &lt;hr&gt;
              &lt;article&gt;
                  &lt;p&gt;Connect&lt;/p&gt;
                  &lt;a href=&quot;&quot; class=&quot;fa fa-instagram&quot; style=&quot;font-size: 30px;&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;
                  &lt;a href=&quot;&quot; class=&quot;fa fa-twitter&quot; style=&quot;font-size: 30px;&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;
                  &lt;a href=&quot;mailto:&quot;&gt;&lt;i class=&quot;fa fa-envelope-o&quot; style=&quot;font-size: 30px;&quot; target=&quot;_blank&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;span style=&quot;font-size: 0.5em;&quot;&gt;&lt;p&gt;Made by Kieron Spearing&lt;/p&gt;&lt;/span&gt;
              &lt;/article&gt;
          &lt;/footer&gt;
      &lt;/html&gt;
  </code></pre>
  <p>I would love some assistance and also any improvements you could suggest to make it better designed and responsive</p>