概要
input要素でwidthに100%を設定すると、親要素からはみ出てしまうことがあります。
次のcodepenで、上の方がwidthに100%を設定しただけの場合で、親要素（赤枠）からはみ出ていることがわかると思います。
See the Pen inputにwidth:100%を設定すると親要素からはみ出る by take it easy (@take-it-easy) on CodePen.
対応方法
デフォルトで幅や高さを設定する場合、borderやpaddingは含まれません。
元々、input要素にはborderやpaddingが設定されています。
そこで、要素の幅と高さに「borderとpaddingを含めるか」を指定することができる「box-sizing」で、「border-box」を設定することではみ出さないようになります。
（デフォルトでは「content-box」が設定されています。）
なお、ベンダープレフィックスが必要となる設定となります。
input {
box-sizing: content-box;
-moz-box-sizing: border-box; // Firefox
-webkit-box-sizing: border-box; // Google Chrome、Safari
-o-box-sizing: border-box; // Opera
-ms-box-sizing: border-box; // Internet Explorer
}対応ブラウザに応じて、ベンダープレフィックスの設定も行いましょう。
参考
box-sizing – CSS: カスケーディングスタイルシート | MDN
box-sizing は CSS のプロパティで、要素の全体の幅と高さをどのように計算するのかを設定します。
