レスポンシブ作業で少しだけ画面幅からはみ出す原因

レスポンシブ作業を行っているとスマホ表示で１pxとか2pxだけはみ出ることがあります。

widthは100％にしているので収まるはずが収まらない！っということが良くあります。

そんな時に確認していただきたいのがボーダーがコンテンツの幅計算に含まれていない設定になっていないかです。

box-sizingというプロパティがあるのですが初期値がボーダーが含まれない設定になっています。

コンテンツを100％にしていてもボーダーが両端で1pxずつあった場合は100％＋2pxとなります。

初期値：content-box

これを

.inbox{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

上記のようにborder-boxに設定してみましょう。

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

はブラウザ差分対応です。

他には画像のサイズが指定されていない場合や、コンテナ内のエリアが幅指定されているなどがありますが、これはchromeのデベロッパーツールなどで選択モードで細かく見ていくと原因箇所が分かると思いますので試してください。