How can I wrap an iframe in a container div?

[veloso97]

Hello, I need your help due to the following problem, what happens is that I am trying to fit an iframe in a div container, but unfortunately I am taking the width of the page wrong and I do not know how to solve it.

This is the page, and what I want is that the width covers all the space, without those black borders.

<main>
      
      <div style="position: relative; width: 100%; height: 0; padding-top: 38.25%;
 padding-bottom: 48px; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; 
 margin-bottom: 0.9em; overflow: hidden;
 border-radius: 8px; will-change: transform;">
  <iframe id="iFrame" loading="lazy" style="position: absolute; width: 100%; height: 100%; 
  top: 0; left: 0; border: none; padding: 0;margin: 0;"
    src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAEzZGoHgSI&#x2F;view?embed" 
    allowfullscreen="allowfullscreen" allow="fullscreen" scrolling="no" frameborder="0">
  </iframe>
</div>

    </main>

[bbsmooth]

If I get rid of all the styling you’ve added on the <div> then it seems to work for me. But I’m not exactly sure what you are trying to do here so that might not be what you want. Based on the page you are embedding in the iframe, you are always going to have some black borders, either on the sides or the top/bottom because that’s the way the page is styled.