右側に余白が出来ているのを解決したい。

Question

Bootstrapを使ってWebサイトを作っています。

サイトはほぼ完成し、Githubで試しにサイト公開をして細かいところを修正しようとしていたところ、768p幅以降のサイトの右側にx15pxの余白が出来ていました。以前も経験したことのある問題でしたのでコードを書くたびに気を付けながら進めていましたが、終盤で気が付き原因が分かりません。。

前回は、overflow:hidden;をbody下を<div>で囲んで付けて対処しました。
今回もこの方法が使えるかと試しましたが、ダメでした。

こちらがGithubで公開したサイトのURLです。

[https://naffchen.github.io/sample-site/]

検証ツールで見たところ、id="loading" がbodyからはみ出していることに気が付きwidthを設定したりしてみましたが、直りません。
ブレイクポイントである、768px以降になると余白が生まれます。その理由も分かりません。。

もし分かる方がいらっしゃれば原因を教えて頂けると大変有難いです。よろしくお願いします。

Answer 1

416行目の</div>に対応する開始タグ<div>が見つかりませんので、これが原因かも。
あと、419行目も</a>が一つ多いです。

Comments

[Naffchen]

回答頂き有難うございました！
原因はご指摘の通り</div>が1つ多いことと、<div class="row">の中に納まっていない<div class="col">がありました。教えて頂いた箇所を整えて確認したところ発見することが出来ました。有難うございます！！footerの中の</a>もひとつ多かったです。バグは出ていませんでしたが以後気を付けます。
こういった右側の余白の原因に、記入ミスが関係しているということが今回身に沁みました。有難うございました！

Answer 2

ここを

<div class="container menu-container">

こうするとどうでしょうか。

<div class="container-fluid menu-container">

containerとcontainer-fluidの違い

Comments

[Naffchen]

回答頂き有難うございました！
container-fluidも試しましたが、こちらのclass名が原因ではありませんでした。