Tea Cozy Help

Hi everyone! I’ve been king of struggling on this project but i got almost everything down (with some obv mistakes but i got it to good enough)! The only thing left is the part of the project is the Location section. Here is what I have for it.

Here is the HTML:

<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" type="text/css" href="C:\Users\muham\Desktop\projects\Tea Cozy\resources\css\styles.css">

        <title>Tea Cozy</title>

            <header>

                <nav>

                    <a href="#"><img class="logo" src ="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png", alt="Tea Cozy Logo"></a></li>

                    <ul class="tabs">

                        <li><a href="#">Mission</a></li>

                        <li><a href="#">Featured Tea</a></li>

                        <li><a href="#">Locations</a></li>

                    </ul>

                </nav>

            </header>

            <body>

            <section class="mission">

                <div id="banner">

                    <h2>Our Mission</h2>

                    <h4>Handpicked, Artisnally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>

                </div>

            </section>

            <section class="teaOfTheMonth">

                <h2>Tea of the Month</h2>

                <h4>What's Steeping at The Tea Cozy?</h4>

                    <div id="teaPics">

                        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="Fall Berry Blitz Tea">

                        <figcaption>Fall Berry Blitz Tea</figcaption>

                        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg" alt="Spiced Rum Tea">

                        <figcaption>Spiced Rum Tea</figcaption>

                        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg" alt="Seasonal Donuts">

                        <figcaption>Seasonal Donuts</figcaption>

                        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg" alt="Myrtle Ave Tea">

                        <figcaption>Myrtle Ave Tea</figcaption>

                        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" alt="Bedford Bizarre Tea">

                        <figcaption>Bedford Bizarre Tea</figcaption>

                    </div>

            </section>

            <section class="locations">

                <h4>Locations</h4>

                <div id="area">

                    <h3>Downtown</h3>

                    <p>384 West 4th St</p>

                    <p>Suite 108</p>

                    <p>Portland, Maine</p>

                </div>

                <div id="area">

                    <h3>East Bayside</h3>

                    <p>3433 Phisherman's Avenue</p>

                    <p>(Northwest Corner)</p>

                    <p>Portland, Maine</p>

                </div>

                <div id="area">

                    <h3>Oakdale</h3>

                    <p>515 Crescent Avenue</p>

                    <p>Second Floor</p>

                    <p>Portland, Maine</p>

                </div>

            </section>

            <footer class="contact">

                <h2>The Tea Cozy</h2>

                <h5>[email protected]</h5>

                <h5>917-555-8904</h5>

            </footer>

            <h5 #id="copyright">copyright The Tea Cozy 2017</h5>

                              

        </body>

   

    </head>

</html>

Here is the CSS:

*{

    font-family: Helvetica, sans-serif;

    color: seashell;

    font-size: 22px;

    background-color: black;

    opacity: 0.9;

}

/* Header */

header{

    display: flex;

    position: fixed;

    width: 100%;

    border-bottom: 1px solid seashell;

    height: 69px;

    background-color: black;

    z-index: 1;

    top: 0;

}

.logo{

    height: 50px;

    margin-left: 10px;

    align-items: center;

    padding-top: 5px;    

}

/* Navigation*/

nav{

    width: 100%;

    display: flex;

    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    width: 100%;

    height: 69px;

    border-bottom: 1px solid seashell;

    justify-content: space-between;

    align-items: center;

    z-index: 1;

    top: 0;

}

nav ul{

    display: flex;

    justify-content: flex-end;

    text-decoration: underline;

    list-style-type: none;

    padding: 0 10px;

}

nav li{

    padding: 0 10px;

}

.mission{

    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;

    position: relative;

    width: 1200px;

    height: 700px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    margin: 0 auto;

    padding: 69px;

    margin-top: 69px;

}

.mission div{

    width: 100%;

    text-align: center;

}

.mission h2{

    font-weight: 800;

    font-size: 40px;

    margin: 5px;

    margin-bottom: -10px;

}

.mission h4{

    font-weight: 800;

    margin-bottom: 10px;

    }

.teaOfTheMonth{

    align-items: center;

    text-align: center;

    display:flex;

    justify-content: center;

    width: 1600px;

    margin: 0 auto;

    flex-direction: column;

}

.teaOfTheMonth h2{

    font-weight: 700;

    font-size: 32px;

    margin-bottom: -5px;

}

#teaPics{

    display: flex;

    margin: 0 auto;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

}

#teaPics img{

    width: 300px;

    height: 200px;

    padding: 10px;

}

#teaPics figcaption{

    font-weight: 700;

    position: relative;

    bottom: 0;

    left: 0;

    right: 0;

}

.locations{

  height:750px;

  width: 1200px;

  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");

  background-position: center;

  background-repeat: no-repeat;

  display:flex;

  flex-flow: row-nowrap;

  justify-content:space-around;

  align-content:center;

       

}

footer{

    text-align: center;

    height: 200px;

    display: flex;

    justify-content: space-between;

    flex-direction: column;

}

footer h2{

    font-weight:800;

    font-size: 32px;

    margin-bottom: -3px;

}

footer h5{

    margin-bottom: -3px;

}

#copyright {

    text-align: left;

    padding: 20px;

}