埋め込みによって水平スクロールバーが表示される

Question

この「バグ」が何度も繰り返されているので、私は何か間違ったように見えます。左または右のパッドを要素に追加すると、ページ全体が100％幅になりました！私は水平のスクロールバーを持っています...下のリンクで自分のコードをチェックして、毎回よくある間違いを教えてください。ありがとうございました！

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%;を削除するか、box-sizing:border-box;を適用します。

box-sizing: border-box;幅と高さのプロパティは、パディングとボーダーではなく、マージンが含まれています。 - MDN