Padding lässt die horizontale Bildlaufleiste erscheinen

Question

Sieht aus, als hätte ich etwas falsch gemacht, weil ich diesen "Bug" immer und immer wieder habe ... Wenn ich einem Element linkes oder rechtes Padding hinzufüge, wurde meine ganze Seite mehr als 100% breit! Ich habe eine horizontale Bildlaufleiste ... Bitte überprüfen Sie meinen Code auf dem Link unten und sagen Sie mir, was für einen häufigen Fehler ich jedes Mal mache. Vielen Dank!

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

width:100%; entfernen oder box-sizing:border-box; anwenden.

box-sizing: border-box; Die Breite und Höhe Eigenschaften umfassen die Polsterung und Grenze, aber nicht den Rand. - MDN