アドセンスのレスポンシブ広告がはみ出る場合の対処法

Googleアドセンスでスマホに広告を貼る場合、レスポンシブ広告だと画面幅いっぱいまで表示されてしまって、余白がなくなってしまいました。
結構これではまってしまったので備忘録としてメモしておきます。

私の場合、PCだと問題なく表示したいdivの中に表示されているのですが、スマホだとどうしても余白（paddingやmargin）を無視してスマホの幅で表示されていました。
色々検索するとメディアクエリを設定するといけると書いているものが多かったですが、そのとおりにしても解決できませんでした。

対処法は簡単で、表示させたい箇所のdivにoverflow: hidden;を指定することで解決できました。

サンプルコード

↓広告を挿入する箇所のコードです。

<div class="ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
 style="display:block"
 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
 data-ad-slot="xxxxxxxxxx"
 data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

アドセンスのコードを内包するdivを記述します。アドセンスのコードはそのままです。

↓CSSのコードです。

.ad {
    overflow: hidden;
}

内包したdivにoverflow: hidden;を設定します。

以上で余白内に収まって表示できるようになりました。