iframe spill out of div container when aligning to the left - html

Question

So I am trying to add a Twitter iframe to my website's home page. I want the iframe to align to the left inside of the div container. The problem is, whenever I align it to the left, it spills out of the div yet when I align to the right, it fits perfectly.
Can someone please explain to me why this is happening? And how to fix it?
This is the code I am using for the div/iframe:
<article>
<div class="container">
<iframe src="https://www.twitter.com" width="270" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</article>
This is the CSS I am using to style:
.container {
background-color: #FFFFFF;
margin: 5em auto;
padding: 25px;
border-radius: 1.5em;
width: 1200px;
display: absolute;
}
iframe {
float: left;
margin-left: auto;
margin-right: auto;
text-align: center;
display: block;
}
I just want it to fit inside of the div on the left, not at the very edge or spilling out. Also, I am using Chrome, but I notice my iframe doesn't display on Edge, is there a reason for this? I don't get any errors, it just comes up as a blank, gray box.
I may have this solved soon, so I thank everyone in advance who has any advice to offer!

Answer 1

If you look at the iFrame CSS it contains margin-left: auto and margin-right: auto. You then have a float left. Margin auto on left and right will center the element. Remove the margin-left: auto. You also have text-align: center...

Answer 2

I'm not sure if this was a typo when writing this question or not, but there is no absolute value for the display property.
Switching display to position results in this:
.container {
background-color: blue;
margin: 5em auto;
padding: 25px;
border-radius: 1.5em;
width: 1200px;
/* Removed "display: absolute;" */
position: absolute;
}
iframe {
float: left;
margin-left: auto;
margin-right: auto;
text-align: center;
display: block;
}
<article>
<div class="container">
<iframe src="https://www.twitter.com" width="270" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</article>
which sounds like what you're looking for as it prevents the iframe from overflowing. Of course, there are other ways to align things to the right or left, such asflexbox.