Tea Cozy Project Locations Section

Hello! I’m having some trouble with this project, I’ve almost got it complete but I have 3 main issues. #1, in the locations section I’m having an issue where the text “Locations” has a grey background, even when background-color: transparent; is applied. Second, the individual locations are appearing as one block, rather than three black blocks. I’ve tried space-between and adding margins but it doesn’t seem to want to work. Last thing I’m wanting to achieve is making the mission and location section also shrink with the window, but I’m not sure why it isn’t working. I’ve tried adding a flex-shrink to the flex box. Any help is appreciated!.

<!DOCTYPE html>
<html>
    <head>
        <title>"Tea Cozy"</title>
        <link href="./assets/style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
<!--- Header -->
        <div class="header">
            <img class="logo" src="assets/images/img-tea-cozy-logo.png" />
            <div class="links">
                <ul>
                    <li><a>Mission</a></li>
                    <li><a>Featured Tea</a></li>
                    <li><a>Locations</a></li>
                </ul>
            </div>
        </div> 
        <div class="mission">
            <div class="text">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>

<!--- Tea of the Month -->
        <div class="totm">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at the Tea Cozy?</h4>
            <div class="image-container">
                <div class="image">
                    <img src="assets/images/img-berryblitz.jpg"/>
                    <h4>Fall Berry Blitz Tea</h4>
                </div>
                <div class="image">
                    <img src="assets/images/img-spiced-rum.jpg"/>
                    <h4>Spiced Rum Tea</h4>
                </div>
                <div class="image">
                    <img src="assets/images/img-donut.jpg"/>
                    <h4>Seasonal Donuts</h4>
                </div>
                <div class="image">
                    <img src="assets/images/img-myrtle-ave.jpg"/>
                    <h4>Myrtle Ave Tea</sph4an>
                </div>
                <div class="image">
                    <img src="assets/images/img-bedford-bizarre.jpg"/>
                    <h4>Bedford Bizarre Tea</h4>
                </div>
            </div>
        </div>
<!--- Locations -->

        <div class="locations">
            <div class="locations-container">
                <div class="title">
                    <h3>Locations</h3>
                </div>
                <div class="location-info">
                    <div class="location-name">
                        <h3>Downtown</h3>
                        <p>384 West 4th St</p>
                        <p>Suite 108</p>
                        <p>Portland, Maine</p>
                    </div>
                    <div class="location-name">
                        <h3>East Bayside</h3>
                        <p>3433 Phisherman's Avenue</p>
                        <p>(Northwest Corner)</p>
                        <p>Portland, Maine</p>
                    </div>
                    <div class="location-name">
                        <h3>Oakdale</h3>
                        <p>515 Crescent Ave</p>
                        <p>Second Floor</p>
                        <p>Portland, Maine</p>
                    </div>
                </div>
            </div>
        </div>


<!--- Contact -->
        <div class="contact-container">
            <div class="item-email">
                <div class="contact-email">
                    <h2>The Tea Cozy</h2>
                    <p>contact@theteacozy.com</p>
                    <p>917-555-8904</p>
                </div>
            </div>
        </div>
    </body>

<!--- Footer -->
    <footer>
        <div class="copyright">
            <h5>copyright The Tea Cozy 2017</h5>
        </div>
    </footer>
</html>
/* Global */

* {
    font-family: Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
    box-sizing: border-box;
}

/* Header */
.header {
    z-index: 1;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: flex-end;
    height: 69px;
    border-bottom: 1px solid seashell;
    width: 100%;
    align-items: center;
    flex-direction: row;
}

.text {
    display: flex;
    flex-shrink: 1;
}

.header img {
    height: 50px;
    padding-left: 10px;
    margin-right: auto;
}

.header ul{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding-right: 2rem;
}

.header ul li{
    flex: 0 0 auto;
    padding-left: 20px;
}

.links{
    flex-direction:row;
    text-decoration: underline;
    align-items: center;
}

/* Mission Statement */
.mission {
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);
    background-position: center;
    background-size: cover;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    min-height: 700px;
    height: auto;
    width: 1200px;
    margin: 0 auto;
}

.mission .text{ 
    display: inline-flex;
    flex-direction: column;
    width: 1200px;
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* Tea of the Month */
.totm {
    text-align: center;
}

.image-container {
    display: inline-flex;
    max-width: 1000px;
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.totm img{
    width: 300px;
    height: 200px;
    padding:10px;
}
/* Locations */
.locations {
    margin: 0 0 auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-image:url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*15lpy6u*_ga*MzM2Nzk4MDE3LjE2NTIwNjgyNTM.*_ga_3LRZM6TM9L*MTY1NDA0NTU3MC40Ni4xLjE2NTQwNDU1ODIuNDg.);
    background-position: cover;
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
    max-width: 1200px;
}

.locations-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 1200px;
    background-color: transparent;
}

.title {
    margin-bottom: 15px;
}

.location-info{
    display: inline-flex;
    justify-content: center;
    flex-direction: row;
    opacity: 1;
    background-color: black;
}

.location-name{
    width: 300px;
    height: auto;
    margin: 15px 20px;
}




/* Contact */
.item-email {
    height: 200px;
    width: 300px;
    color: #b3b9c4;
    margin: auto;
}

.contact-email {
    text-align: center;
}

/* Footer */
footer {
    bottom: 0;
    display: flex;
    text-align: left;
    width: 100%;
    margin-left: 20px;
}

I have made my code available on github pages as well so you can see what I’m saying is happening. https://ceaves.github.io/teacozy/