title: CSS: input field and select option bugs?
body: <p>Why input fields always 'over-run' the div that contain them when I set them to 100%?</p>
  
  <p>css,</p>
  
  <pre><code>.item-form {
      margin:0px 0px 10px 0px;
      clear:both;
      border:1px solid #999966;
  } 
  
  .item-form  input,  
  .item-form textarea,
      {
      background-color:#ffffff;
      border: 1px solid #dddddd; 
      width:100%;
      font-family:Arial, Helvetica, sans-serif;
      font-size:13px;
      padding:2px 2px 2px 2px;
  }
  </code></pre>
  
  <p>html,</p>
  
  <pre><code>&lt;div class="item-form"&gt;
      &lt;input name="username" type="text" id="username" value="" title="USER NAME"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>output,
  <img src="https://i.stack.imgur.com/5B9EY.jpg" alt="enter image description here"></p>
  
  <p>How can I fix it??</p>
  
  <p>Thanks.</p>
  
  <p><strong>EDIT:</strong> </p>
  
  <p>I seem to have fixed the input fields issue, but then I came across another problem - <strong>select field</strong>,</p>
  
  <pre><code>.item-form {
      margin:0px 0px 10px 0px;
      padding:0px 6px 0px 0px; /** important **/
      clear:both;
      }
  
  .item-form select{
      border: 1px solid #dddddd; 
      width:100%; /** a bug to fix **/
      font-family:Arial, Helvetica, sans-serif;
      font-size:13px;
      padding:2px 2px 2px 2px;
      color:#999;
      }
  </code></pre>
  
  <p>Now the select fields are 'under-run'!!</p>
  
  <p><a href="https://i.stack.imgur.com/1B2Ry.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1B2Ry.jpg" alt="enter image description here"></a></p>
  
  <p>How do I fix this??</p>
  
  <p>Thanks.</p>