Flex Divs at wrong size whenever another is added - html

Question

I'm attempting to rework the sections of my website, and I got halfway there on what I wanted, except whenever I attempt to add another element, the size breaks for some reason, so what's supposed to be two large boxes, become two small boxes with overlapping text
How it looks with a single element
How it looks with two elements
Image I edited image to show what I'm trying to accomplish
Someone told me previously that it had something to do with line-height, but messing with line-height didn't really change much besides the fact the text wasn't clipping anymore, but the size change was still a problem
I want them all to be a specific size, independently if there's another element near them or not, if I leave the .headercontainer width at 100%, the single element background stretches through the whole page, which is something I don't want, here's what I'm talking about
Here's my CSS code for the page:
.headercontainer {
display: flex;
height: 5%;
width: 46%;
margin: auto;
}
div.wrapper {
flex: 1;
border: 1px solid white;
margin: 0.50%;
}
.headerpfp {
float: left;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%
}
.posttext {
text-align: left;
margin-left: 1%;
margin-top: -0.35%;
}
.headtext {
margin-top: 3.00%;
color: lime;
text-align: left;
}
And the HTML code:
<div class="headercontainer">
<div class="wrapper" style="background-image:url(../../images/quakebackgrounds/sitebackground03.png);background-size:cover;float:left;">
<a href="../../blog/essays/pages/Early2000sInternet.html">
<img src="../../blog/images/PFPs/JuneSSaiPFP.png" style="border:1px solid white;" class="headerpfp">
<h2 class="headtext">The Early and Mid 2000's Internet</h2></a>
<p style="text-align:left;">Posted August 7, 2022</p>
<p style="text-align:left;">Written By June S. Sai</p>
<br>
<br>
<p class="posttext">There was no bigger joy than sending your</p>
<p class="posttext">friends DooM wads on Skype and playing deathmatch</p>
<p class="posttext">while voicecalling all day long, good times.</p>
</div>
<div class="wrapper" style="background-image:url(../../images/quakebackgrounds/sitebackground03.png);background-size:cover;float:right;">
<a href="../../blog/essays/pages/Early2000sInternet.html">
<img src="../../blog/images/PFPs/JuneSSaiPFP.png" style="border:1px solid white;" class="headerpfp">
<h2 class="headtext">The Early and Mid 2000's Internet</h2></a>
<p style="text-align:left;">Posted August 7, 2022</p>
<p style="text-align:left;">Written By June S. Sai</p>
<br>
<br>
<p class="posttext">There was no bigger joy than sending your</p>
<p class="posttext">friends DooM wads on Skype and playing deathmatch</p>
<p class="posttext">while voicecalling all day long, good times.</p>
</div>
</div>
Here's my style.css file aswell: https://junessai.net/style.css

Answer 1

Change the width of .headercontainer from 46% to 100% in CSS
.headercontainer {
display: flex;
height: 5%;
width: 100%;
margin: auto;
}
div.wrapper {
flex: 1;
border: 1px solid white;
margin: 0.50%;
}
.headerpfp {
float: left;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%
}
.posttext {
text-align: left;
margin-left: 1%;
margin-top: -0.35%;
}
.headtext {
margin-top: 3.00%;
color: lime;
text-align: left;
}
<div class="headercontainer">
<div class="wrapper" style="background-image:url(../../images/quakebackgrounds/sitebackground03.png);background-size:cover;float:left;">
<a href="../../blog/essays/pages/Early2000sInternet.html">
<img src="../../blog/images/PFPs/JuneSSaiPFP.png" style="border:1px solid white;" class="headerpfp">
<h2 class="headtext">The Early and Mid 2000's Internet</h2></a>
<p style="text-align:left;">Posted August 7, 2022</p>
<p style="text-align:left;">Written By June S. Sai</p>
<br>
<br>
<p class="posttext">There was no bigger joy than sending your</p>
<p class="posttext">friends DooM wads on Skype and playing deathmatch</p>
<p class="posttext">while voicecalling all day long, good times.</p>
</div>
<div class="wrapper" style="background-image:url(../../images/quakebackgrounds/sitebackground03.png);background-size:cover;float:right;">
<a href="../../blog/essays/pages/Early2000sInternet.html">
<img src="../../blog/images/PFPs/JuneSSaiPFP.png" style="border:1px solid white;" class="headerpfp">
<h2 class="headtext">The Early and Mid 2000's Internet</h2></a>
<p style="text-align:left;">Posted August 7, 2022</p>
<p style="text-align:left;">Written By June S. Sai</p>
<br>
<br>
<p class="posttext">There was no bigger joy than sending your</p>
<p class="posttext">friends DooM wads on Skype and playing deathmatch</p>
<p class="posttext">while voicecalling all day long, good times.</p>
</div>
</div>