title: Padding makes horizontal scrollbar to appear
body: <p>Looks like I did something wrong, because I have this "bug" over and over again... When I add left or right padding to an element my whole page became more then 100% width! I got a horizontal scroll bar... Please check out my code on the link below and tell me what common mistake I do every time. Thank you!</p>
  
  <p><a href="https://jsfiddle.net/utujm2f6/" rel="nofollow">jsFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html{margin:0; padding:0; font-family: 'open sans','helvetica'}
  #wrapper{display: block; float: left; max-width: 100%; width: 100%;}
  #parser{display: block; width: 100%; padding: 100px 10%;}
  #parser .field{display: block;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;div id="parser"&gt;
      &lt;form method="post"&gt;
        &lt;input type="text" name="vk_string" class="field"&gt;
        &lt;input type="submit" name="vk_send" value="go!"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>