title: CSS - Input at 100% width overlaps div
body: <p>I am trying to fix a regular input box with padding, border, inside a div with padding. However, I want the input to have its width to be 100% but as you can see, it overlaps. How do I fix this?</p>
  
  <p>CSS</p>
  
  <pre><code>#one {
      background:red;
      width:300px;
      padding:5px;
  }
  #two {
      width:100%;
      border:3px solid blue;
      padding:4px;
  }
  </code></pre>
  
  <p>​</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="one"&gt;&lt;input type="text" value="Test" id="two" /&gt;&lt;/div&gt;​
  </code></pre>