昨今、レスポンシブ対応のサイトを作るのは当然となってきましたが、モバイル用のCSSを設定して実際の画面を見た際にこんなことはありませんか。
右側に生じている謎の余白！！！
ちなみに、GoogleChromeの検証画面では確認できず、実機のiPhoneの画面でだけ確認できました。なので、色々調べてきた際のpaddingやmarginの設定誤りなどではなさそう。
「overflow:hidden;」を全体を囲んでいるClassに設定しても変化なし。
なんでだ……とさらに色々と調べてみた結果、下記のようなものを設定してみると言うのも出てきて、やってみました。
viewport設定を書きに書き換えてみる……。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
残念ながら私の場合は、上記を書き替えてみても変化なしでした。
そのため、さらに色々とネット検索などで調べてみた結果……。
width:100%とwidth:autoの違いのサイトを見つけまして、
mainタグに設定していたwidth:100%をautoに変更したところ……なんと、消えました！！！
width:100%は、要素の幅
width:autoは、幅 ＝ 左右padding ＋ 左右border ＋ 要素の幅
※こちらが参考サイト様です。
という違いがあるとのことでしたので、検証画面では判別できませんでしたが、何かしらの要素が原因で100％が効かずにはみ出ていたのだろうと思います。
これからは、一番外側の親になるClassやmainタグなどには、width:autoにしておこうと思いました。