Just wanted to share my solution for the “Tea Cozy Layout” project and perhaps get some feedback on what can be improved 
Here is the link to my GitHub: https://github.com/andresuriegas/codecademy_exercises/tree/main/Tea_Cozy_Layout_Flexbox
Also the code is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Tea Cozy</title>
<link rel="stylesheet" href="styles.css">
<meta>
</head>
<body>
<header>
<img class="logo" src="/Tea_Cozy_Layout_Flexbox/Assets/img-tea-cozy-logo.png" alt=" Tea Cozy Logo">
<nav>
<ul class="navigation">
<li><a href="#mission-target">Mission</a></li>
<li><a href="#featured-tea-target">Featured Tea</a></li>
<li><a href="#locations-target">Locations</a></li>
</ul>
</nav>
</header>
<a href="" id="mission-target"></a>
<section class="mission-container">
<div class="mission-statement-container">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</section>
<a href="" id="featured-tea-target"></a>
<section class="featured-container">
<div class="featured-statement">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="flexbox-center">
<div class="img-container">
<figure>
<img src="/Tea_Cozy_Layout_Flexbox/Assets/img-berryblitz.jpg" alt="Fall Berry Blitz Tea">
<figcaption>Fall Berry Blitz Tea</figcaption>
</figure>
</div>
<div class="img-container">
<figure>
<img src="/Tea_Cozy_Layout_Flexbox/Assets/img-spiced-rum.jpg" alt="Spiced Rum Tea">
<figcaption>Spiced Rum Tea</figcaption>
</figure>
</div>
<div class="img-container">
<figure>
<img src="/Tea_Cozy_Layout_Flexbox/Assets/img-donut.webp" alt="Seasonal Donuts">
<figcaption>Seasonal Donuts</figcaption>
</figure>
</div>
<div class="img-container">
<figure>
<img src="/Tea_Cozy_Layout_Flexbox/Assets/img-donut.webp" alt="Myrtle Ave Tea">
<figcaption>Myrtle Ave Tea</figcaption>
</figure>
</div>
<div class="img-container">
<figure>
<img src="/Tea_Cozy_Layout_Flexbox/Assets/img-bedford-bizarre.jpg" alt="Bedford Bizarre Tea">
<figcaption>Bedford Bizarre Tea</figcaption>
</figure>
</div>
</div>
</section>
<a href="" id="locations-target"></a>
<section class="locations-container">
<div class="locations-statement">
<h2>Locations</h2>
</div>
<div class="address-container">
<h3>Downtown</h3>
<h4>384 West 4th St</h4>
<h4>Suite 108</h4>
<h4>Portland, Maine</h4>
</div>
<div class="address-container">
<h3>East Bayside</h3>
<h4>3433 Phisherman's Avenue</h4>
<h4>(Northwest Corner)</h4>
<h4>Portland, Maine</h4>
</div>
<div class="address-container">
<h3>Oakdale</h3>
<h4>515 Crescent Avenue</h4>
<h4>Second Floor</h4>
<h4>Portland, Maine</h4>
</div>
</section>
<section class="contact-container">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h4>917-55-8904</h4>
</section>
<footer>
<h5>copyright The Tea Cozy 2017</h5>
</footer>
</body>
</html>
/*RESET STYLES*/
* {
margin: 0;
padding: 0;
}
/*GLOBAL STYLES*/
html {
font-family: "Helvetica", Arial, sans-serif;
font-size: 22px;
line-height: normal;
}
body {
background-color: black;
color: seashell;
opacity: 0.9;
}
/*NAVIGATION BAR STYLES*/
header {
height: 69px;
width: 100%;
top:0;
z-index: 2;
border-bottom: 1px solid seashell;
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
background-color: black;
}
.logo {
height: 50px;
margin-left: 10px;
}
.navigation {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
margin: 0;
list-style: none;
}
.navigation a {
text-decoration: underline;
display: block;
color: seashell;
margin: 0 40px;
}
.navigation a:hover {
opacity: 0.7;
}
@media screen and (max-width: 700px) {
.navigation {
flex-flow: column wrap;
padding: 0;
}
.navigation a {
text-align: center;
padding: 10px;
}
header {
height: auto;
}
}
/*MISSION SECTION STYLES*/
.mission-container {
display: flex;
position: relative;
top: 70px;
height: 700px;
width: 1200px;
background-image: url(/Tea_Cozy_Layout_Flexbox/Assets/img-mission-background.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
align-items: center;
margin: auto;
}
@media screen and (max-width: 1200px){
.mission-container {
width: auto;
}
.mission-container h2, h4{
width: auto;
}
}
@media screen and (max-width: 700px) {
.mission-container {
top: 138px;
}
}
.mission-container h2{
background-color: black;
width: 1200px;
text-align: center;
padding: 20px 0 5px 0;
}
.mission-container h4{
background-color: black;
width: 1200px;
text-align: center;
padding-bottom: 20px;
}
.mission-statement-container {
flex-shrink: 2;
}
/*FEATURED TEAS SECTION STYLES*/
.featured-container {
width: 1000px;
margin: 150px auto 90px auto;
position: relative;
}
.featured-statement {
text-align: center;
margin: 20px;
}
.featured-statement h4 {
margin: 20px 0;
}
.flexbox-center {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.img-container {
display: block;
}
.img-container img{
height: 200px;
width: 300px;
flex-basis: auto;
margin: 10px;
}
figcaption {
text-align: center;
margin-top: 5px;
font-weight: bold;
}
/*LOCATIONS SECTION STYLES*/
.locations-container {
width: 1200px;
height: 500px;
margin: auto;
background-image: url(/Tea_Cozy_Layout_Flexbox/Assets/img-locations-background.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-flow: row wrap;
align-content: center;
justify-content: center;
}
.locations-statement {
text-align: center;
width: 100%;
}
.address-container {
width: 300px;
height: 250px;
margin: 30px 40px;
background-color: black;
opacity: 1;
text-align: center;
}
.address-container h3 {
margin-top: 30px;
}
.address-container h4 {
margin-top: 25px;
font-weight: 400
}
/*CONTACT SECTION STYLES*/
.contact-container {
text-align: center;
height: 200px;
width: auto;
}
.contact-container h2 {
margin-top: 30px;
}
.contact-container h5, .contact-container h4 {
margin: 35px;
}
/*FOOTER STYLES*/
footer h5{
margin: 20px;
float: left;
}