Html – Want to make img background a flex-box and overlay three black text boxes with space-between

I am trying to create three text boxes with white text and a black background laid on top of a background image, all inline by using display flex.

I was able to accomplish this with a flex previously in my html/css code with images, but now the boxes are appearing below one another.

Please help! Much appreciated!

<!--locations-->
    <section>
        <div class="locations">
            <div><img class="img-locations-background" src="C:UsersvkuzmaOneDrive - Compass Energy Systems LtdDesktopVS SheetTea CozyPhotosimg-locations-background.jpg"></div>
                    <div id="box-1">
                        <h3>Downtown</h3>
                        <p>384 West 4th St</p>
                        <p>Suite 108</p>
                        <p>Portland, Maine</p>
                    </div>
                    <div id="box-2">
                        <h3>East Bayside</h3>
                        <p>3433 Phisherman's Avenue</p>
                        <p>(Northwest Corner)</p>
                        <p>Portland, Maine</p>
                    </div>
                    <div id="box-3">
                        <h3>Oakdale</h3>
                        <p>3433 Phisherman's Avenue</p>
                        <p>Second Floor</p>
                        <p>Portland, Maine</p>
                    </div>
            <div>
                <h1 class="loca">Locations</h1>
            </div>
        </div>
    </section>
</body>

/* locations */

.locations {
    position: relative;
    max-height: 500px;
}

.img-locations-background {
    width: 100%;
    height: 500px;
    background-repeat: no-repeat;
    opacity: 0.9;
    object-fit: cover;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.loca {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Helvetica;
    color: seashell;
    background-color: rgb(0, 0, 0, 0);
    width: 99%;
    text-align: center;
}

#box-1 {
    color: seashell;
    text-align: center;
    font-family: helvetica;
    background-color: black;
    height: 200px;
    width: 33.33%;
    display: flex;
    }

#box-2 {
    color: seashell;
    text-align: center;
    font-family: helvetica;
    background-color: black;
    height: 200px;
    width: 33.33%;
    display: flex;
  }

#box-3 {
    color: seashell;
    text-align: center;
    font-family: helvetica;
    background-color: black;
    height: 200px;
    width: 33.33%;
    display: flex;
}