Figure tag not working with flexbox

I am trying to use flexbox to layout my 5 pics in the following configuration, 3 at the top and 2 at the bottom with a container of width of 1000px. this is my html code:

    <div class="centered-text">
        <h2>Tea of the Month</h2>
        <p>What´s Steeping at The Tea Cozy?</p>
    </div>

    <div class="middle-content2">
        <figure id="fall">
            <img src="/images/img-berryblitz.webp" alt="fall">
            <figcaption id="berry">Fall Berry Blitz Tea</figcaption>
        </figure>
        <figure id="spiced">
            <img src="/images/img-spiced-rum.webp" alt="spice">
            <figcaption id="rum">Spiced Rum Tea</figcaption>
        </figure>
        <figure id="seasonal">
            <img src="/images/img-donut.webp" alt="seasonal">
            <figcaption id="donut">Seasonal Donuts</figcaption>
        </figure>
        <figure id="myrtle">
            <img src="/images/img-myrtle-ave.webp" alt="myrtle">
            <figcaption id="ave">Myrtle Ave Tea</figcaption>
        </figure>
        <figure id="bedford">
            <img src="/images/img-bedford-bizarre.webp" alt="bedford">
            <figcaption id="bizarre">Bedford Bizarre Tea</figcaption>
        </figure>

    </div>

</div>

this is my css code:

.middle-content2 {
background-color: #000;
width: 1000px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;

}

/*
#fall #spiced #seasonal #myrtle #bedford {
width: 300px;
height: 200px;
}
*/
#fall {
width: 300px;
height: 200px;
background-size: cover;
}

any hints please

@fretagi have you tried different versions of justified-content? Perhaps look into the space-between or space-around properties and see if that helps put them in the correct positioning.