Tea Cozy Project Review

Hi guys, new to CodeCademy. I’ve completed the TeaCozy project (barely) it took me around 6 hours and I still have not got it down lol. One issue I’m having is changing the background of the word ‘Locations’ to clear.

Can you guys suggest how I can clean up this code/make it better? I feel like I have botched/guessed my way through it all, thanks.


<!DOCTYPE html>
<html>
    <head>
        <title>Tea Cozy</title>
        <link href="teacozy.css" type="text/css" rel="stylesheet"/>
    </head>
<body>
    <nav class="container">
            <img class="logo" src="./Resources/img-tea-cozy-logo (1).webp"/>
            <div class="navmenu ">Mission</div>
            <div class="navmenu ">Featured tea</div>
            <div class="navmenu ">Locations</div> 
    </nav>

<!-- OUR MISSION-->
<div class=missioncontainer>
    <div class="backgroundimage">
        <div class="mission">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>
</div>




<!--TEA OF THE MONTH-->
        <div class="tea"> 
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
        </div>

<div class="teacontainer">
   <div class="caption">
        <img class="teaitems"  src="./Resources/img-berryblitz.webp"/> 
            <h4>Fall Berry Blitz Tea</h4>
    </div>  
    <div class="caption">
        <img class="teaitems" src="./Resources/img-spiced-rum.webp"/>
            <h4>Spiced Rum Tea</h4>
    </div>
    <div class="caption">
        <img class="teaitems" src="./Resources/img-donut.webp"/>
            <h4>Seasonal Donuts</h4>
    </div>
</div>
<div class="teacontainer">
    <div class="caption">
        <img class="teaitems" src="./Resources/img-myrtle-ave.webp"/>
        <h4>Myrtle Ave Tea</h4>
    </div>
    <div class="caption">
        <img class="teaitems" src="./Resources/img-bedford-bizarre.webp"/>
        <h4>Bedford Bizarre Tea</h4>
    </div>
</div>

<!--LOCATIONS-->
<div class="locations">
    <div class="locationsbg">
        <div class="texthere">
            <h2>Locations</h2>
        </div>
        <div class="box">
            <h3>Downtown</h3>
            <p>384 west 4th St</p>
            <p>Suite 108</p>
            <p>Portland, Maine</p>
        </div>
        <div class="box">
            <h3>East Bayside</h3>
            <p>3433 Phisherman's Avenue</p>
            <p>Northwest Corner</p>
            <p>Portland, Maine</p>
        </div>
        <div class="box">
            <h3>Oakdale</h3>
            <p>515 Crescent Avenue</p>
            <p>Second Floor</p>
            <p>Portland, Maine</p>
        </div>
    </div>
</div>

<div class="end">
    <div>
        <h2>The Tea Cozy</h2>
        <h5>[email protected]</h5>
        <h5>917-555-8904</h5>
    </div>
</div>

<footer class="footer">
    <div class="copyright"><h5>copyright The Tea Cozy 2017</h5></div>
</footer>
*{
    font-family:Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
}

.container{
    display:flex;
    align-items: center;
    column-gap: 20px;
    height: 69px;
    border-bottom: 1px solid seashell;
}

.logo{
    margin-right:auto;
    height: 50px;
    padding: 10px;
    border-bottom: 1px solid seashell;



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

.missioncontainer{
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.backgroundimage{
    display: flex;
    background-image: url(./Resources/img-mission-background.webp);
    height: 700px;
    background-repeat: no-repeat;
    width: 1200PX;
    justify-content: center;
    align-items: center;

}
.mission{
    text-align: center;
    width: 1200px;
    line-height: 30%;
}

.tea{
    text-align: center;
    margin-top: 60px;
}

.teacontainer {
    display: flex;
    justify-content: center;
    column-gap: 30px;
}

.teaitems{
    height: 200px;
    width: 300px;
}

.caption{
    text-align: center;
}

.locations{
    display: flex;
    justify-content: center;
}

.locationsbg{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
    width: 1200px;
    background-image: url(./Resources/img-locations-background.webp);
    background-repeat: no-repeat;
    column-gap: 30px;

}
.box{
    height: 250px;
    width: 300px;
    margin-top:15px;
    opacity: 1;
    text-align: center;
}
.texthere{
    position: absolute;
    margin-bottom: 20%;
}
.end{
    display: flex;
    justify-content: center;
    text-align: center;
    height: 200px;
}

.copyright{
    margin-left: 20px;
    text-align: left;
}