title: Bootstrap Footer in main content but full width
body: <p>Okay I do not know wether I have started completely wrong or just do not know how to get it right.</p>
  
  <p>I want the layout of my website to be like this:
  <a href="https://i.stack.imgur.com/JisvD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JisvD.png" alt="enter image description here"></a></p>
  
  <p>I put a div called 'myWrap' around the header and the content. And added this css:</p>
  
  <pre><code>.myWrap {
      position: absolute;
      padding: 0px;
      margin: 0px;
      background: white;
      top: 2%;
      left: 2%;
      right: 2%;
  }
  
  .footer {
      position: absolute;
      background: #363130;
      margin-top: 2%;
      height: 300px;
      left: 0;
      width: 100vw;
  }
  </code></pre>
  
  <p>And the footer is not in the myWrap-div. But now it is just floating behind the content because the position of the myWrap is absolute. 
  How do I put the header and content in the normal flow but infront of the background?</p>
  
  <p>I structured the html like that:</p>
  
  <pre><code>&lt;div class="row container-fluid myWrap"&gt;
      CONTENT
      &lt;div class="container-fluid footer"&gt;
          FOOTER
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I put the footer out of the myWrap div it starts floating around on the top or just overlaps the content/header</p>