title: How to fix bug on Instagram embed
body: <p>I'm hard-coding a website for my student organisation using basic html-css-js and tailwind, in the website I inserted some embeds from instagram, but for some reason it keeps bugging out like so</p>
  <p><a href="https://i.stack.imgur.com/kyPqR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kyPqR.png" alt="bugged instagram embed" /></a></p>
  <p>Does anyone know how to fix this? it should look like this normally</p>
  <p><a href="https://i.stack.imgur.com/lZD5T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lZD5T.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ig-embed {
    @apply block max-w-full overflow-hidden mb-2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ig-embed"&gt;
    &lt;iframe class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/CauLOXop4hS/embed/?cr=1&amp;amp;v=14&amp;amp;wp=652&amp;amp;rd=http%3A%2F%2F127.0.0.1%3A5501&amp;amp;rp=%2F#%7B%22ci%22%3A0%2C%22os%22%3A159.59999999403954%2C%22ls%22%3A141.90000000596046%2C%22le%22%3A142.80000001192093%7D"
      allowtransparency="true" allowfullscreen="true" frameborder="0" height="612" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="background: white; max-width: 540px;  width: calc(100% - 2px); border-radius: 3px; border: 1px solid rgb(219, 219, 219); box-shadow: none; display: block; margin: 0px 0px 12px; min-width: 256px; padding: 0px;"&gt;&lt;/iframe&gt;
    &lt;script
      async src="//www.instagram.com/embed.js"&gt;&lt;/script&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Added some snippets to hopefully help</p>