フリーランスが会社員収入を継続して得られないパターン7つ

CSSで右に余白ができる場合の対処法

右に余白ができる場合の対処法をお伝えします。

1.問題

CSSの設定で右に余白ができてしまう。

 

2.解決策

簡単な順から4つ試してみましょう。

1.overflow:hideen;とwidth:100%;をbody直下のinnerに設定

HTML

CSS

 

2.overflow:hideen;を各section内のinnerに設定

bodyより中のdivタグに設定しましょう。
例えば下記のように各コンテンツのinnerタグ内に設定しましょう。

HTML

CSS

 

3.<div>の数が合っているか確かめる

たとえばdivの閉じタグが多すぎな場合、右に余白ができます。

HTML

 

4.sectionやheaderに設定しているpaddingを外す

paddingを設定したい場合は、headerやsectionに設定するのではなく、中にcontainerなどを設置してそこに設定ましょう。

HTML

 

変更前CSS

 

変更後CSS