How to align boxes horizontal in CSS flex?-CodePudding

I've been trying to align my boxes horizontally, but haven't been able to resolve the issue. Each time I try to, they become stacked horizontally. Rather than centered straight across. Or will just remain stacked in a column(vertically).

HTML for box divs:

<div >
  <h1 >This is Random Info</h1>
  <div >
    <div >
      <div >
        <img src="" alt="Placeholder" >
      </div>
      <h5 >PlaceHolder Text</h5>
      <div >
        <div >
          <img src="" alt="Placeholder" >
        </div>
        <h5 >PlaceHolder Text</h5>
        <div >
          <div >
            <img src="" alt="Placeholder" >
          </div>
          <h5 >PlaceHolder Text</h5>
        </div>
        <div >
          <div >
            <img src="" alt="Placeholder" >
          </div>
          <h5 >Placeholder Text</h5>
        </div>
      </div>
    </div> 
  </div>
</div>

CSS for box div

.b1container {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffdeab;
border-radius: 10px;
transition: 0.5s;
cursor: pointer;
}

.b1container:hover {
width: 250px;
height: 250px;
}

.s2boxImg {
width: 100px;
height: 100px;
border-radius: 5px;
border: 3px dotted #553c2b;
transition: 0.5s;
}

.s2boxImg:hover {
width: 250px;
height: 250px;
border: 3px dotted #f36dcb;
transition: 0.5s;
}

.boxes {
display: flex;
justify-content: space-evenly;
justify-content: center;
margin-top: 30px;
}

Here's the corrected HTML file:

    <div >
      <h1 >This is Random Info</h1>
      <div >        
        <div >
          <div >
            <img src="" alt="Placeholder"  />
          </div>
          <h5 >PlaceHolder Text</h5>
        </div>

        <div >
          <div >
            <img src="" alt="Placeholder"  />
          </div>
          <h5 >PlaceHolder Text</h5>
        </div>

        <div >
          <div >
            <img src="" alt="Placeholder"  />
          </div>
          <h5 >PlaceHolder Text</h5>
        </div>

        <div >
          <div >
            <img src="" alt="Placeholder"  />
          </div>
          <h5 >Placeholder Text</h5>
        </div>
      </div>
    </div>