title: 100% Width causes div to go off screen while in container
body: <p>So I'm having a little trouble aligning my div in the container with Bootstrap.</p>
  
  <p>What I'm trying to do is get the div to extend full width inside the container width.</p>
  
  <p>It works on the left side of the container but it doesn't on the right. It goes off-screen.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- Image With Action Section --&gt;
      &lt;section class="special_section"&gt;
          &lt;div class="container-fluid" style="max-height: 25%"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-12"&gt;
                      &lt;div class="caption-2"&gt;
                          &lt;img src="background-image-url" class="img-full-width img-responsive" alt="" /&gt;
                          &lt;div class="container"&gt;
                              &lt;div class="action-footer"&gt;
                                  &lt;div class="col-sm-10"&gt;
                                      &lt;h4 class="caption-text"&gt;Title&lt;/h4&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-sm-2"&gt;
                                      Link
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="caption"&gt;
                                  &lt;h4&gt;Title&lt;/h4&gt;
                                  &lt;p&gt;Content&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.caption-2 .action-footer {
      margin: -1px 0 0 0;
      padding: 10px;
      font-size: 15px;
  }
  @media (min-width:500px) {
      .caption-2 .action-footer {
          margin:0;
          position: absolute;
          bottom: 0;
          height: 10%;
          width: 100%;
      }
  }
  
  .action-footer .col-md-12 {
      margin-top: -10px;
  }
  </code></pre>
  
  <p>The <code>.action-footer</code> div is the one that I need to be 100% width inside the parent container. Instead it get's way too much width.</p>