title: How to stretch the background color to be width of the parent container after applying padding to it-CSS
body: <p>I am trying to fix a padding issue where I apply padding to he parent container, like this:
  css:</p>
  
  <pre><code>   .main {
    width: 100px;
    border: 1px solid #000;
    background-color: #b0bfc6;
    height: 300px;
    padding: 20px
  }
  
  .m1 {
    color: #000;
    background-color: #fff;
    margin-top:20px;
  }
  
  .m2 {
    color: #000;
    background-color: #fff;
    margin-top:20px;
  }
  </code></pre>
  
  <p>my html:</p>
  
  <pre><code>&lt;div class="main"&gt;
   &lt;div class="m1"&gt;some content
   &lt;/div&gt;
   &lt;div class="m2"&gt;some content
  
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is when I apply padding to the "main" class <code>div</code> the selection background get padded as well as shown in fiddle:</p>
  
  <p><a href="http://jsfiddle.net/btjpk5f0/7/" rel="nofollow noreferrer">http://jsfiddle.net/btjpk5f0/7/</a></p>
  
  <p>Is there a way where I could apply padding to the parent container, but still be able to stretch the selected background color to be the full width of the container?</p>
  
  <p>Thanks!</p>