Webページ・横スクロールの解消

Question

Webページ・横スクロールの解消

HTML,css,bootstrapなどを用いてサイト模写をしているのですが、いつの間にか横スクロールができるようになってしまいました。
横スクロールをなくそうと思い、width:100%;にしたりoverflow:autoやhiddenを試してみましたが横スクロールが直りません。
また、どこをみたら解決策がわかるのかもわからない状態なのでそこも教えていただけると嬉しいです。

発生している問題・エラーメッセージ

該当のソースコード

*{
font-size: 62.5%;
line-height: 1.6;
margin:0;
padding:0;
vertical-align: baseline;
}
body{
background-color: #fff;
font-family: Meiryo,Hiragino Kaku Gothic Pro sans-serif;
font-size: 1.5rem;
line-height: 1.6;
color:#333;
transition: transform 0.3s;
width: 100vw;
box-sizing: border-box;
margin:0;
}

ソースコード

試したこと

width:100%;にしたりoverflow:autoやhiddenを試してみましたが横スクロールが直りません。
ページのすべてが右にはみ出しているような感じで、＊やbodyにも上記を試してみましたが直りませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[takopo]

html と css のコードを載せていただくと回答を得られやすくなると思います。

Answer 1

width:100vw はウィンドウ全体の幅になるため、
今回のようにbody {width: 100vw}と指定している状態で「縦スクロールバー」など余計な幅が横方向に加わった際に、

ウィンドウ幅＋余計な幅 ＝ bodyの幅

となり、ウィンドウよりも広い幅をbodyが持ってしまう事で
必然的に横方向のスクロールバーが出ることになります。

単純に解決したいのであれば、bodyに指定したスタイル
width:100vw を width:100%;にすることで解決します。

それでも出てしまう場合は、内包する要素の幅が突き抜けているのが原因と考えられます。
その場合は、

width: 100%;
max-width: 100%;
overflow: hidden;

の3本立てで追記すると、大抵の突き抜ける現象は収まると思います。

その場合も、突き抜けてしまっている要素は今後の不安材料となるので早めに特定して改善することをおすすめします。

Comments

[yuta007]

ありがとうございます。max-widthを試していないことに気づきませんでした。