Flex Divs at wrong size whenever another is added-CodePudding

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

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 >
<div  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;" >
<h2 >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 >There was no bigger joy than sending your</p>
<p >friends DooM wads on Skype and playing deathmatch</p>
<p >while voicecalling all day long, good times.</p>
</div>

<div  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;" >
<h2 >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 >There was no bigger joy than sending your</p>
<p >friends DooM wads on Skype and playing deathmatch</p>
<p >while voicecalling all day long, good times.</p>
</div>
</div>

Here's my style.css file aswell: https://junessai.net/style.css

CodePudding user response：

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 >
<div  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;" >
<h2 >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 >There was no bigger joy than sending your</p>
<p >friends DooM wads on Skype and playing deathmatch</p>
<p >while voicecalling all day long, good times.</p>
</div>

<div  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;" >
<h2 >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 >There was no bigger joy than sending your</p>
<p >friends DooM wads on Skype and playing deathmatch</p>
<p >while voicecalling all day long, good times.</p>
</div>
</div>