昨今、レスポンシブ対応のサイトを作るのは当然となってきましたが、モバイル用の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にしておこうと思いました。