収入・働き方別プログラミング言語の選び方

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

webサイト制作をして右に余白ができる場合の対処法を簡単な順に4つお伝えします。

1.CSSで右に余白ができる問題

右に余白ができてしまう。

 

2.CSSで右に余白ができる場合の解決策

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

CSSで右に余白ができる場合の解決策1.overflow:hideen;とwidth:100%;をbody直下のinnerに設定

HTML

CSS

 

CSSで右に余白ができる場合の解決策2.overflow:hideen;を各section内のinnerに設定

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

HTML

CSS

 

CSSで右に余白ができる場合の解決策3.<div>の数が合っているか確かめる

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

HTML

 

CSSで右に余白ができる場合の解決策4.sectionやheaderに設定しているpaddingを外す

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

HTML

 

変更前CSS

 

変更後CSS