cssでのボックスの幅は width と padding と border-width の合計となります。
width : 250px;
padding 20px;
border-width : 20px;
実際の幅は330px
box-sizing:border-box を指定すると
width に書いた値が padding,border-width を含んだものになるのでwidth:250px;となります。
レスポンシブの際に横幅100%にすることが多い時
width: 100%;
height: auto;
この場合にborderを指定するとはみ出てしまいますが、box-sizing:border-box ではみ出し防止になります。