【CSS】どうしてもページスクロールすると左右に動いてしまう問題！（苦労しました）

この問題、すっごーーーーーく苦労しました。

４ｐｘのはみ出しを探す作業が大変すぎました。

悩んでいる方もいると思いますので共有させていただきます。

要素がはみ出しているか確認する方法

デベロッパーツールを使用して確認します。

一番簡単なのが、下記の方法です。

①デベロッパーツールの要素（htmlコードがかいてあるところ）の<body>タグをクリック

②コンソールをクリック

③コンソールの中に「document.documentElement.scrollWidth」を記入

　→　出てくる数字は、ページ全体の幅

④コンソールの中に「document.documentElement.clientWidth」を記入

　→　出てくる数字は表示エリア（デバイスの幅）

これが、document.documentElement.scrollWidth　の方が数値が大きいと、どこかがはみ出している！という指標になります！

デベロッパーツールを使用し、ＨＴＭＬのコードを一つ一つ確認する方法です。

コンテンツの親要素をhoverして、画面左に表示される数値を確認します。

表示幅よりも大きいと、そこに問題があることになります！

私が作成したものは、ヘッダーと固定ＣＴＡがありました。

これをposition: fixedにして固定しており、それがはみ出しの原因だったのです。

解決方法は、「width: 100vw;」に横幅を指定！！！

PCブラウザで、スクロールバーがページの外側じゃなく内側に表示されるときは、スクロールバー分を引く必要があります。
→　width: calc(100vw – 17px)

position: fixed　の要素（ヘッダーやCTA）には基本不要です！

・html　や　 body に overflow-x: hidden; を入れる

・固定しているものに　position: fixed　に設定している人は、width: 100vw;　がおそらくベスト！

width:100%の時に、左右にpaddingを入れてしまうと、100％＋paddingになるので注意です！

width:auto　は、padding分は含まれたものになっています。

詳しくは以前にも記事にしたので参考にしてください！

以前別の記事で紹介していたものです。

強制的に制御するものなので、最終手段ですね！