質問: こんにちは。現在Webサイト模写の練習で、ドットインストールのこのページを模写しています。 Bootstrapも使っています。 しかし、レスポンシブ対応のCSSコードを書いているのですが、右側に出来た空白が取り除けません。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/b11c26fecd740fddd2191ed5f97d604d.png) 上の画像のように、右側に空白が空いてしまいます。 CSSのコードがあまりキレイではないのですが、どこが悪いのか教えていただけませんでしょうか。 ぼくが試したことは、containerで囲ってoverflow: hidden; , widthの見直し, などなどです。 時間がかかりすぎてしまうので、ご教授いただけたらと思いました。 ここに上げるにはコードが長すぎるので、GitHubの方を見ていただけたらと思います。 お手数かけ、申し訳ありません。 よろしくお願いします。
回答: すぐに解決できる問題ではないと思います。 こちらのcssの記述もおかしいです。 最大幅670pxに対してwidthがimportant指定で940pxとなっています。 そしてimportant指定は後々にcssが効かない!どうして!?の原因にもつながるので極力使用しないことをおすすめします。 ``` @media screen and (max-width: 670px) body { width: 940px!important; box-sizing: border-box; } ``` chromeのデベロッパーツールを使用しスマホのサイズで検証してみて、横幅に空白が出てきそうなcssを除外してみてください。