質問: ### 前提・実現したいこと ランディングぺージを作っているのですが、内容がブラウザ画面にフィットせず、 右にスクロールしてしまうと空白部分が出来てしまい、その空白を削除したいのです。 宜しくお願い致します。 ### 該当のソースコード ``` ``` ``` .ichiban-3 {text-align:center; margin :300px 0px;} .ac {width :800px;} .box12-3 { width :100%; text-align:center; position: absolute; top: 4830px; /*ブラウザのウィンドウ基準*/ left: 98px; /*ブラウザのウィンドウ基準*/ background: #00000000; font-weight: bold; padding: 0em; margin: 0 auto; } .sha4 {width :310px;} .box12-4 { width :100%; text-align:center; position: absolute; top: 4863px; /*ブラウザのウィンドウ基準*/ left: -123px; /*ブラウザのウィンドウ基準*/ background: #00000000; font-weight: bold; padding: 0em; margin: 0 auto; } .sha5 {width :262px;} ``` ``` ``` ### 試したこと 検証で調べてpadding等を変化させましたが、解決しませんでした。 ### 補足情報(参考URL) https://github.com/jlmakes/scrollreveal
回答: 右側に空白が出て横スクロールが出てしまうのは、 「コンテンツ内容がbodyの幅を超えている」というのが原因です。 直し方は、 1. はみ出しているコンテンツをみつけてbodyに収まるように修正する 2. はみ出してる部分をoverflow:hidden;で強制的に非表示にする のどちらかです。 コードが不完全なので具体的にどこがはみ出しているのか判別は難しいですが、 .box12-3と.box12-4 が `width:100%`(親要素=body?の幅いっぱい)なのに leftで左右に移動させているので、その分が左右にはみ出しているのではないかという疑念はありますね。 本来なら意図せずはみ出しているコンテンツを見つけてきちんと親要素に収まるように修正するのが筋ですが、 どうしても分からないなら`html,body {overflow-x: hidden;}`としてみてもいいかもしれません。