title: How to make a div flush with the left margin when inside a Bootstrap container
body: <p>I am trying to make a shader to go all the way to the left (or right) depending on my page. The problem comes with using the container. </p>
  
  <p>What I want: 
  <a href="https://i.stack.imgur.com/lQuFt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lQuFt.jpg" alt="Screenshot of web page with a large photo background with a semi-transparent block on top of it. The block starts from the very left hand edge and is a third of the web page in width."></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="col-xs-5"&gt;  
      &lt;div class="shader" style="margin-top: 500px;"&gt;
        &lt;h3&gt;Super cool title&lt;/h3&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following CSS:</p>
  
  <pre><code>.shader {
    background-color: rgb(254, 254, 254);
    background-color: rgba(254, 254, 254, 0.85);
    padding: 15px;
    border-radius: 5px;
  }
  </code></pre>
  
  <p>The problem is, if I put it inside the container, it won't go to the side. If I put it outside the container, It won't stop after the col block.</p>
  
  <p>I have tried this with a fluid container, but it still won't go all the way to the side. I also have to do a lot of trickery to align things out properly.</p>