title: Why is my bootstrap navbar-expand-sm navigation covering content?
body: <p>We are having trouble with our responsive navigation covering content.
  <img src="https://i.stack.imgur.com/zfnTi.png" alt="our navigation is covering the rest of our content when in mobile" /> When the user toggles the navigation button, we want it to push the H1 and  down the screen. I am thinking that our css for the body is effecting this. I cannot think of a decent solution for this, but I have considered having the navigation have a background, but it will still cover our &quot;Denver Moving and Storage&quot; content.</p>
  <p>We're still learning how to use stackoverflow and we're thankful for any help you guys may be able to offer.</p>
  <pre><code>html,body
  {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
      overflow-x: hidden; 
  }
  </code></pre>
  <p>This is our code:</p>
  <pre><code>&lt;!-- container with bg img --&gt;
  &lt;div class=&quot;cover&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;!-- NAV Here --&gt;
      &lt;nav class=&quot;navbar navbar-expand-sm navbar-dark d-flex&quot; aria-label=&quot;responsive navbar&quot;&gt;
        &lt;a class=&quot;navbar-brand&quot; href=&quot;index.html&quot;&gt;&lt;img src=&quot;img/the-other-side-moving-storage-color-white.png&quot; width=&quot;75%&quot; height=&quot;75%&quot;&gt;&lt;/a&gt;
        &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#responsive-navbar&quot; aria-controls=&quot;responsive-navbar&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
            &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
        &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;responsive-navbar&quot;&gt;
          &lt;ul class=&quot;navbar-nav me-auto mb-2 mb-sm-0&quot;&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link&quot; href=&quot;denver-moving-services.html&quot;&gt;Moving&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link&quot; href=&quot;denver-storage-company.html&quot;&gt;Storage&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link&quot; href=&quot;receiving-and-delivery.html&quot;&gt;Furniture Delivery&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link&quot; href=&quot;about-us.html&quot;&gt;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a href=&quot;free-estimate.html&quot;&gt;&lt;button class=&quot;btn btn-tosa&quot; type=&quot;submit&quot;&gt;Free Estimate&lt;/button&gt;&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;!-- Nav end --&gt;
    &lt;/div&gt;
    &lt;!-- FS Hero --&gt;
    &lt;div class=&quot;container-xl mb-4&quot;&gt;
      &lt;div class=&quot;row text-center&quot;&gt;
        &lt;div class=&quot;col-12&quot;&gt;
          &lt;h1 class=&quot;py-5&quot;&gt;Denver Moving and Storage&lt;/h1&gt;
          &lt;a href=&quot;free-estimate.html&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-tosa mx-3&quot;&gt;Free Estimate&lt;/button&gt;&lt;/a&gt;
          &lt;a href=&quot;about-us.html&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-tosa mx-3&quot;&gt;Our Story&lt;/button&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- End FS Hero --&gt;
  &lt;/div&gt;
    &lt;!-- End Cover --&gt;
  </code></pre>