Cozy Tea project help with location section

Hello, looking for some help/ feedback for this project.
I am struggling a bit with the flex box properties in this project, I finally got the “Tea of the Month” section to look right, but I am struggling with the location section at the moment.

For some reason, the black backgrounds that should be behind the location addresses are very large and are taking up most of the background image. I have the width and height set for them, so I’m not quite sure what I’m missing.

Any feedback welcome! Thank you!

<!DOCTYPE html>
<html>
<head>
    <title>Cozy Tea Codecademy Project</title>
    <link href="style.css" rel="stylesheet">
</head>
<!--Header Section-->
<header>
    <img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*1jzhgo*_ga*OTIzMjE3OTg3OC4xNjczNjU1NDc4*_ga_3LRZM6TM9L*MTY4NjkyMTc4Ny4yNi4xLjE2ODY5MjgzNjQuNTYuMC4w">
    <nav>
        <a href="#">Locations</a>
        <a href="#">Featured Tea</a>
        <a href="#">Mission</a>
    </nav>
</header>
<main>
    <div class="banner">
        <div class="bannertext">
        <h2>Our Mission</h2>
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable,
            Small Batch, Fair Trade, Organic Tea
        </h4>
        </div>
    </div>
    <!--Tea of the Month Section-->
    <section class="monthly">
        <div class="teaomonth"> <h2>Tea of the Month</h2>
        <h4>What's Steeping at The Tea Cozy?</h4></div>
        <div class="container">
            <div class="tea"><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*rn94tv*_ga*OTIzMjE3OTg3OC4xNjczNjU1NDc4*_ga_3LRZM6TM9L*MTY4Njk0NDM1OS4yNy4xLjE2ODY5NDUzMzcuNTYuMC4w">
            Fall Berry Blitz Tea </div>
            <div class="tea"><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*1q8k4dq*_ga*OTIzMjE3OTg3OC4xNjczNjU1NDc4*_ga_3LRZM6TM9L*MTY4Njk0NDM1OS4yNy4xLjE2ODY5NDUzMzcuNTYuMC4w">
             <div class="teaname"> Spiced Rum Tea</div></div>
            <div class="tea"><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*1188whu*_ga*OTIzMjE3OTg3OC4xNjczNjU1NDc4*_ga_3LRZM6TM9L*MTY4Njk0NDM1OS4yNy4xLjE2ODY5NDUzMzcuNTYuMC4w">
            Seasonal Donuts </div>
            <div class="tea"><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*1qqd6jc*_ga*OTIzMjE3OTg3OC4xNjczNjU1NDc4*_ga_3LRZM6TM9L*MTY4Njk0NDM1OS4yNy4xLjE2ODY5NDUzMzcuNTYuMC4w">
            Myrtle Ave Tea </div>
            <div class="tea"><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*14rqhxp*_ga*OTIzMjE3OTg3OC4xNjczNjU1NDc4*_ga_3LRZM6TM9L*MTY4Njk0NDM1OS4yNy4xLjE2ODY5NDUzMzcuNTYuMC4w">
             Bedford Bizarre Tea</div>
        </div>  
    </section>
    <!--Location section-->
    <section class="locations">
        <h2>Locations</h2>
        <div class="locationstuff">
            <div class="place">
                <h3>Downtown</h3>
                <p>384 West 4th St</p>
                <p>Suite 108</p>
                <p>Portland, Maine</p>
            </div>
            <div class="place">
                <h3>East Bayside</h3>
                <p>3433 Phisherman's Avenue</p>
                <p>(Northwest Corner)</p>
                <p>Portland, Maine</p>
            </div>
            <div class="place">
                <h3>Oakdale</h3>
                <p>515 Crescent Avenue</p>
                <p>Second Floor</p>
                <p>Portland, Maine</p>
            </div>
        </div>

    </section>
</main>
<!--Footer-->
<footer>
    <div class="foot">
        <h2>The Tea Cozy</h2>
        <h5>[email protected]</h5>
        <h5>917-555-8904</h5>
    </div>
    <div class="copy">
        <h5>copyright The Tea Cozy 2017</h5>
    </div>

</footer>

</html>
*{
    font-family: Helvetica, sans-serif;
    
    color: seashell;
    background-color: black;
    opacity: .9;
}
p{
    font-size: 22px;
}
h2,h3,h4,h5{
    font-weight: bold;
}
h2{
    font-size: 40px;
}
h3{
    font-size: 32px;
}
h4{
    font-size: 25px;
    margin:0;
}
/*Header*/
header{
    height: 69px;
    border-bottom: 1px solid seashell;
    position:fixed;
    top: 0;
    width:100%;
    z-index: 1;

}
.logo{
    height: 50px;
    margin: 10px;
    float:left;
    
}
nav a{
    float:right;
    padding:20px;
    font-size: 25px;
}
main{
    margin-top: 100px;
}
/*Banner section*/

.banner{
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*if53gv*_ga*OTIzMjE3OTg3OC4xNjczNjU1NDc4*_ga_3LRZM6TM9L*MTY4NjkyMTc4Ny4yNi4xLjE2ODY5MjgzNjQuNTYuMC4w);
    height:700px;
    width:1200px;
    margin:auto;
    display:flex;
    
}
.bannertext{
    background-color: black;
    text-align: center;
    position:absolute;
    top:50%;
    width:1200px;
}
.bannertext h2, h4{
    margin:5px;
    padding:10px;
}




/*Monthly section*/
.teaomonth{
    text-align: center;
    padding: 10px;
    margin-top: 0;
    margin-bottom: 0;
}
.container{
    display: flex;
    justify-content: space-around;
    flex-grow: 1;
    flex-wrap: wrap;
    
}
.tea{
    font-size: 22px;
    display:inline-flex ;
    height: 200px;
    width:300px;
    flex-direction: column;
    justify-content: space-around;
    margin:25px;
   
}
/*Location*/
.locations{
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*12hvmdj*_ga*OTIzMjE3OTg3OC4xNjczNjU1NDc4*_ga_3LRZM6TM9L*MTY4Njk0NDM1OS4yNy4xLjE2ODY5NDUzMzcuNTYuMC4w);
    position:static;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    z-index: 1;
}
.locations h2{
    position: relative;
    top:100px;
}
.locationstuff{
    display:flex;
    height: 600px;
    align-items: center;
    align-content: center;
    justify-content: space-around;
}

.place{
    
    width: 300px;
    height: 300px;
    margin: 0 20px;
    text-align: center;
    

}