inputのtextを作成をし横幅を100％にした場合
親要素からはみ出す場合があります。

.input_box {
  width:100%;
  height:30px;
  border:1px solid #FF1D00;
  padding:20px 0px;
}
.input_box input[type="text"] {
  width:100%;
}

<div class="input_box">
  <input type="text">
</div>

このような形になってしまいます。
これは、iputに枠線がある為にはみ出してしまう現象です。
そこで

.input_box2 {
  width:100%;
  height:30px;
  border:1px solid #FF1D00;
  padding:20px 0px;
  
}
.input_box2 input[type="text"] {
  width:100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

<div class="input_box2">
  <input type="text">
</div>

このように、「box-sizing: border-box;」で枠線を横幅に含めることではみだしを防ぐことができます。