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://www.canva.com/design/DAEzZGoHgSI/view?embed"
allowfullscreen="allowfullscreen" allow="fullscreen" scrolling="no" frameborder="0">
</iframe>
</div>
</main>