【overflow】右に変な余白が出来た時の対処法（スマホでも）【wordpress】【web制作】

ECサイトを作成しているのですが、ふと確認した時に右に変な余白が出来てしまうことが有りました。

最初は気にしていなかったのですが、操作中に右にちょっとずれるのが気持ち悪かったので修正しました。

その時にした対応方法を紹介します。

全体をwrapしてoverflow: hidden;

.wrap{
    overflow:hidden;
}

iphoneではみ出ていた部分を治すときにこれをしました。
簡単に説明すると、全体をくくっている要素に対して、overflowをhiddenしました。

overflowのhiddenとは、はみ出た部分は無視してもらっているということです。
参考overflowについて

横幅widthの設定変更

pcで見た時の余白は以下のように対処しました。

.wrap{
    width:100%;
}

としていたものを無効にして、

@media (min-width: 1200px){
    .wrap{
        width: 1170px;
    }
}

というようにしました。
画面に対してのwidthをしっかり指定してあげることによって、いい感じに余白がけされました。

viewportについて

こういった問題の時に調べると、必ずviewport問題が出てきます。

大体の問題は、最初に挙げた２つの方法で対処出来ますが、もし全くできなかったら以下の参考記事で修正してみてください。
参考もう逃げない。HTMLのviewportをちゃんと理解する