title: full width background color inside container bootstrap
body: <p>I have this markup:</p>
  
  <pre><code>&lt;article class="featured"&gt;
  &lt;img class="bg-featured" src="http://placehold.it/1200x400"&gt;&lt;/img&gt;
   &lt;div class="overlay"&gt;&lt;/div&gt;
  
        &lt;div class="container"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
              &lt;div class="featured-excerpt"&gt;
              &lt;div class="meta"&gt;
                &lt;div class="category"&gt;Watch&lt;/div&gt;
                &lt;ul class="tags"&gt;
                &lt;li&gt;Sustainability, Global, Learning&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="content"&gt;
                 &lt;h1 class="title"&gt;Title&lt;/h1&gt;
                 &lt;p class="info"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non
                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
                 &lt;div class="sponsored"&gt;Sponsored content:&lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/article&gt;
  </code></pre>
  
  <p>And I want to apply to the "content" div a full width background color.</p>
  
  <p>How can I do this through CSS?</p>
  
  <p>Here is a <a href="https://output.jsbin.com/mujobologe" rel="noreferrer">jsbin</a> to show you exactly what I'm trying to do. </p>