title: How to fit child div to parent div when parent div have padding?
body: <p>I've inserted an <code>&lt;input type=text /&gt;</code> to the <code>.searchbox</code> div, but it's overflowing out of the body from the right because of the padding. How can I fix this?</p>
  
  <pre><code>.searchbox {
      width: 100%;
      height: 40px; 
      background-color:#0099FF;
      padding-left: 20px;
      padding-right: 20px;
  }
  .inputb {
      width: 100%;
  }
  @media (max-width: 490px) {
     .searchbox {
          padding-left: 5px;
          padding-right: 5px;
      }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="searchbox"&gt;
      &lt;input class="inputb" type="text" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/brendan34/yLH7L/4/" rel="nofollow">http://jsfiddle.net/brendan34/yLH7L/4/</a></p>