The Tea Cozy Project Review

Hello all - I’ve just completed The Tea Cozy Project and it definitely was a fun challenge. It looks to be responsive enough however I would love some constructive criticism from you all. The biggest challenge for me was wrapping my head around Parent/Child relationships when it comes to flex, but I think I got there in the end - at least I hope I did. Many thanks in advance!

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./Resources/index.css">
    <title>Tea Cozy Landing Page</title>
</head>

<body>
    <header class="header">
        <img class="logo"
            src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*7srqnd*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NDk4NzgxOS4yMTEuMS4xNjc0OTg4ODYxLjAuMC4w"
            alt="">
        <nav>
            <p class="mission"><a href="#">Mission</a></p>
            <p class="featured"><a href="#">Featured Tea</a></p>
            <p class="locations"><a href="#">Locations</a></p>
        </nav>
    </header>

    <!---Mission section-->

    <div class="container">
        <div class="our-mission">
            <div class="mission-container">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
    </div>

    <!---Featured tea section-->

    <div class="featured-tea">
        <div class="featured-container">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
        </div>
    </div>

    <div class="container">
        <div class="image-container">
            <div class="item"><img
                    src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*1mjoa9p*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NTA3MDQ3My4yMTUuMC4xNjc1MDcwNDczLjAuMC4w"
                    alt="Fall Berry Blitz Tea">
                <h4>Fall Berry Blitz Tea</h4>
            </div>
            <div class="item"><img
                    src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*1eu8kyv*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NTA3MDQ3My4yMTUuMC4xNjc1MDcwNDczLjAuMC4w"
                    alt="Spiced Rum Team">
                <h4>Spiced Rum Tea</h4>
            </div>
            <div class="item"><img
                    src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*1eu8kyv*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NTA3MDQ3My4yMTUuMC4xNjc1MDcwNDczLjAuMC4w"
                    alt="Seasonal Donuts">
                <h4>Seasonal Donuts</h4>
            </div>
            <div class="container2">
                <div class="item"><img
                        src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*7mab7t*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NTA3MDQ3My4yMTUuMC4xNjc1MDcwNDczLjAuMC4w"
                        alt="Myrtle Ave Team">
                    <h4>Myrtle Ave Team</h4>
                </div>
                <div class="item"><img
                        src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*1pknvs9*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NTA1NzQ3My4yMTQuMS4xNjc1MDU3OTk0LjAuMC4w"
                        alt="Bedford Bizzare Tea">
                    <h4>Beford Bizzare Tea</h4>
                </div>
            </div>
        </div>
    </div>

    <!---Locations section-->

    <div class="container">
        <div class="location">
            <div class="location-container">
                <h2 class="local">Locations</h2>
                <div class="outer-container">
                    <div class="location1">
                        <div class="heading-container">
                            <h3>Downtown</h3>
                        </div>
                        <h4>385 West 4th St</h4>
                        <h4>Suite 108</h4>
                        <h4>Portland, Maine</h4>
                    </div>
                    <div class="location1">
                        <div class="heading-container">
                            <h3>East Bayside</h3>
                        </div>
                        <h4>3433 Phisherman's Avenue</h4>
                        <h4>(Northwest Corner)</h4>
                        <h4>Portland, Maine</h4>
                    </div>
                    <div class="location1">
                        <div class="heading-container">
                            <h3>Oakdale</h3>
                        </div>
                        <h4>515 Crescent Avenue</h4>
                        <h4>Second Floor</h4>
                        <h4>Portland, Maine</h4>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!---Contact section-->

    <div class="container">
        <div class="contactinfo">
            <div class="contactinfo-container">
                <h3>The Tea Cozy</h3>
                <h5>[email protected]</h5>
                <h5>917-555-8904</h5>
            </div>
        </div>

    </div>

    <!---footer section-->

    <div>
        <footer>Copyright The Tea Cozy 2017</footer>
    </div>
    
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Helvetica;
    font-size: 22px;
    background-color: black;
    color: seashell;
    opacity: 0.9;
}

.header {
    display: flex;
    position: fixed;
    width: 100%;
    height: 70px;
    align-items: center;
    border-bottom: 1px solid seashell;
    background-color: black;
}

.logo {
    display: flex;
    height: 50px;
    padding-left: 10px;

}

nav {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.mission,
.featured {
    text-decoration: underline;
    padding-right: 25px;
}

.locations {
    text-decoration: underline;
    padding-right: 10px;
}

a {
    color: seashell;
}

.container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.our-mission {
    display: flex;
    width: 1200px;
    height: 700px;
    justify-content: center;
    align-items: center;
    padding-top: 70px;
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*1q2gmhr*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NTA1NzQ3My4yMTQuMS4xNjc1MDU3OTk0LjAuMC4w);
    flex-wrap: wrap;
}

.mission-container, .location-container, .heading-container, .contactinfo-container {
    width: 100%;
    flex-wrap: wrap;
}

h2, h4, h5 {
    display: flex;
    background-color: black;
    justify-content: center;
    line-height: 60px;
    align-items: center;
    flex-wrap: wrap;
}


.featured-tea {
    display: flex;
    width: 100%;
    justify-content: center;
    padding-top: 70px;
    padding-bottom: 10px;
}

.container2 {
    display: flex;
    width: 666px;
    justify-content: space-around;
}

.image-container {
    display: flex;
    width: 1000px;
    justify-content: space-around;
    flex-wrap: wrap;
}

.item img {
    margin-top: 10px;
    width: 300px;
    height: 200px;
}

.item h4 {
    text-align: center;
}

.container4 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.location {
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*jd03ec*_ga*MTEwODQ0ODE2Mi4xNjUyMzQ3MTA1*_ga_3LRZM6TM9L*MTY3NTE0ODk5MS4yMjIuMS4xNjc1MTQ5MDEyLjAuMC4w);
    display: flex;
    justify-content: center;
    width: 1200px;
    height: 550px;
    margin-top: 50px;
}

.local {
    background: none;
    justify-content: center;
    margin-top: 50px;
}

.outer-container {
    margin-top: 15px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.location1 {
    display: block;
    width: 300px;
    height: 310px;
    background-color: black;
    line-height: 60px;
    flex-grow: 0;
}

.heading-container {
    width: 100%;
}

h3 {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.contactinfo {
    display: flex;
    width: 1200px;
    height: 200px;
}

.contactinfo-container h3 {
    margin-bottom: 30px;
}

footer {
    padding-left: 20px;
    margin-top: 20px;
    display: flex;
    justify-content:flex-start;
}