Padding makes horizontal scrollbar to appear

Question

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!

jsFiddle

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;}

<div id="wrapper">
  <div id="parser">
    <form method="post">
      <input type="text" name="vk_string" class="field">
      <input type="submit" name="vk_send" value="go!">
    </form>
  </div>
</div>

Answer 1

Remove width:100%; or apply box-sizing:border-box;.

box-sizing: border-box; The width and height properties include the padding and border, but not the margin. -MDN