[HTML & CSS]レスポンシブ画面で右側に空白が出来たのを直せない

Question

こんにちは。現在Webサイト模写の練習で、ドットインストールのこのページを模写しています。
Bootstrapも使っています。

しかし、レスポンシブ対応のCSSコードを書いているのですが、右側に出来た空白が取り除けません。

上の画像のように、右側に空白が空いてしまいます。
CSSのコードがあまりキレイではないのですが、どこが悪いのか教えていただけませんでしょうか。

ぼくが試したことは、containerで囲ってoverflow: hidden; , widthの見直し, などなどです。
時間がかかりすぎてしまうので、ご教授いただけたらと思いました。

ここに上げるにはコードが長すぎるので、GitHubの方を見ていただけたらと思います。
お手数かけ、申し訳ありません。

https://github.com/ia17011/dotinstall_copy

よろしくお願いします。

Comments

[8yazaki]

githubのリンク先がおかしいです。また、githubからダウンロードしてブラウザ表示してみましたが、画像の状態から大きく違っており検証できません

[ul_]

リンク先編集、imgファイルの追加　いたしました。よろしくお願いいたします。

Answer 1

すぐに解決できる問題ではないと思います。

こちらのcssの記述もおかしいです。
最大幅670pxに対してwidthがimportant指定で940pxとなっています。
そしてimportant指定は後々にcssが効かない！どうして！？の原因にもつながるので極力使用しないことをおすすめします。

@media screen and (max-width: 670px)
body {
    width: 940px!important;
    box-sizing: border-box;
}

chromeのデベロッパーツールを使用しスマホのサイズで検証してみて、横幅に空白が出てきそうなcssを除外してみてください。