サイト制作で右側にできた余白・隙間

コーダーはサイト制作をする際に独自のリセットcssを最初に設定してから構築を進めていきます。
このリセットcssのお陰で微妙なズレをなくし、webデザイナーが制作したデザインに沿って組み立てていくのですが、
「できたー！」と思ってブラウザ確認すると「あれ？なにこの余白!?」ってことが正直多々あります。
この余白の正体を突き止めるのが今回記事にした内容です。

余白・隙間の正体を突き止める

まずは下記をcssに加えます。

「*」は全ての要素を適用、「outine」は輪郭線です。
これで再度ブラウザで表示させてみてください。
輪郭線の右側が画面で見えていないパーツが余白・隙間の正体となります。

修正方法

余白・隙間を作ったパーツに記述しているcssによって修正方法は異なります。
以前はoverflow: hidden;を使って余白をなくしたり、display:noneを使って非表示にしたりしていましたが、それですむパーツとそれではすまないパーツがあると思いますので、見つけたパーツによって修正方法はそれぞれでcssを組み立ててみてください。