Adsense Ad Breaks on Inline & Defer CSS

Hi! When I use the inline & defer CSS option (following the instructions in Ohlsson’s Critical Path Generator video), the modified responsive above-the-fold ad shown below is moved to the right so part of it can’t be seen on either mobile or desktop, and on desktop, it shows a 728×90 instead of a 336×280 ad. When I toggle the inline and defer option back off, it works properly again, showing on desktop a centered, 336×280 ad, and a centered 320×100 ad on mobile.

<style>
.abovefold { width: 320px; height: 100px; }
@media(min-width: 500px) { .abovefold { width: 336px; height: 280px; } }
</style>
<center><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle abovefold"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></center> 

Thanks!