title: Bootstrap: Too Much Spacing (Not Responsive)
body: <p>I'm trying to learn bootstrap and built a website with a video background on top and text below it. <strong>When I reduce the desktop size screen to one of mobile size, a large gap appears in between the video and body text.</strong> Any help would be helpful in my pursuit to learn boostrap! Thanks so much. </p>
  
  <p><a href="https://i.stack.imgur.com/VUOfG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VUOfG.png" alt="Picture of my problem"></a></p>
  
  <p>I suspect it's a padding or margin problem? But why would it expand more when I make the browser window smaller?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class = "container-fluid"&gt;
          &lt;div class = "row"&gt;
  
          &lt;div class = "header-container"&gt;
              &lt;div class = "video-container"&gt;
                  &lt;div align="center" class="embed-responsive embed-responsive-16by9"&gt;
                        // video code removed (for succinctness)
                  &lt;/div&gt; &lt;!-- video responsiveness --&gt;
              &lt;/div&gt; &lt;!-- video-container --&gt;
  
              &lt;div class = "col-md-12 text-center"&gt;
                  &lt;h3&gt; 
                      TEXT
                  &lt;/h3&gt;
              &lt;/div&gt;
  
              &lt;/div&gt; &lt;!-- header-container --&gt;
              &lt;/div&gt; &lt;!-- row --&gt;
          &lt;/div&gt; &lt;!-- container --&gt;
  
      &lt;section id="services"&gt;
          &lt;div class="row"&gt;
               &lt;div class="col-sm-3 col-sm-offset-2" id="red"&gt;
                    &lt;h2 class="text-center"&gt;
                    Services
                    &lt;/h2&gt;
  
                    &lt;p class="text-justify"&gt;
                      // BODY TEXT removed (for succinctness)
                    &lt;/p&gt;
               &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.header-container {
      width: 100%;
      height: 700px;
      border-left: none;
      border-right: none;
      position: relative;
      padding: 0px;
      margin: 0px;
  }
  
  .video-container {
      position: absolute;
      top: 0%;
      left: 0%;
      height: 100%;
      width: 100%;
      overflow: hidden;
      z-index: -1;
  }
  
  video { max-width: 100%; min-width: 100%; min-height: 100%; }
  
  #services{
      background-color: white;
      height: 25px;
  }
  </code></pre>