title: Why is padding right not working?
body: <p>I want to add padding around the iframe but for some reason I can't get it to apply padding equally around each side. </p>
  
  <pre><code>.container {
  width: 980px;
  margin: 0 auto;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.content {
  padding-top: 100px;
  margin: 0 auto;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>iframe {
  padding: 20px;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>&lt;div class="content"&gt;
          &lt;div class="container"&gt;
  
          &lt;iframe width="100%" height="500" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/468897489%3Fsecret_token%3Ds-lEQFX&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&amp;visual=true"&gt;&lt;/iframe&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/xBEta.png" rel="nofollow noreferrer">Mobile Version</a></p>