起きたこと
Bootstrap4を使ってレスポンシブ対応のWebページを作ったら、右側に謎の余白ができてしまった。
画像のように右端に隙間ができてしまい、無駄な横スクロールが発生する。
bodyのwidthやmarginをいじってみたが直らなかった。
対処方法
bodyの中身をwrapしてoverflow:hidden;を設定したら直った。
変更前HTML
sample.html
<!doctype html>
<html lang="ja">
<head>
...（省略）...
</head>
<body>
<h1>hello</h1>
...（省略）...
</body>
</html>
変更後HTML
sample.html
<!doctype html>
<html lang="ja">
<head>
...（省略）...
</head>
<body>
<div id="wrap">
<h1>hello</h1>
...（省略）...
</div>
</body>
</html>
body直下にdivを追加して、id「wrap」を指定する。
変更後CSS
layout.css
#wrap {
overflow: hidden;
}
CSS側ではid「wrap」に対してoverflow: hidden;を指定した。
これで謎の余白は表示されなくなった。