Okay so I think I’m done with the Tea Cozy project in the web development skill path, however I feel like my text is clumsy and representative and that It could’ve been a lot smoother. So if anyone wants / have the time to read through my code and gie em soem feedbacks on where I can improve to make the code cleaner please reply with the tips 
Here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tea Cozy</title>
<link href="./css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="topnav">
<img class="logo" src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
</div>
<div class="topnav-right">
<a href="#home">Home</a>
<a href="#featured-tea">Featured Tea</a>
<a href="#locations">Locations</a>
</div>
</header>
<div class="background">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
<!-- Tea images title -->
<div class="monthlyTea">
<h2>Tea of the month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="monthlyImages">
<div class="item">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-berryblitz.jpg">
<span>Berry Blitz Tea</span>
</div>
<div class="item">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-spiced-rum.jpg">
<span >Spiced Rum Tea</span>
</div>
<div class="item">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-donut.jpg">
<span>Donut</span>
</div>
<div class="item">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
<span>Myrtle Ave</span>
</div>
<div class="item">
<img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
<span>Bedford Bizarre</span>
</div>
</div>
<div class="flex-container-locations">
<span class="title">Locations</span>
<div class="left">
<span class="Bold-Location">Downtown</span>
<span>384 West 4th St</span>
<span>Suite 108</span>
<span>Portland, Maine</span>
</div>
<div class="center">
<span class="Bold-Location">East Bayside</span>
<span>3433 Phisherman's Avenue</span>
<span>(Northwest Corner)</span>
<span>Portland, Maine</span>
</div>
<div class="right">
<span class="Bold-Location">Oakdale</span>
<span>515 Crescent Avenue</span>
<span>Second Floor</span>
<span>Portland, Maine</span>
</div>
</div>
<footer>
<div class="Foot-Text">
<h2>The Tea Cozy</h2>
<h5>contact@theteacozy.com</h5>
<p>917-555-8904</p>
</div>
<span>copyright The Tea Cozy 2017</span>
</footer>
</body>
</html>
Here is the CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: black;
color: seashell;
font-size: 22px;
opacity: 0.9;
font-family: 'Helvetica', Arial, sans-serif;
}
header {
width: 100%;
border-bottom: 1px solid seashell;
position: fixed;
z-index: 10;
height: 69px;
background-color: black;
}
.topnav-right a {
color: seashell;;
margin-left: 30px;
margin-right: 0px;
text-decoration: underline;
}
.topnav-right {
color: seashell;
text-align: center;
float: right;
padding: 0 15px;
height: 69px;
margin-top: 17px;
}
.topnav {
display: inline-block;
height: 69px;
width: 200px;
position: relative;
}
.topnav img {
max-height: 50px;
max-width: 200px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/* --------------------------------------- */
.background {
background-image: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg);
height: 700px;
width: 1200px;
position: relative;
margin: 0 auto;
top: 69px;
display: flex;
justify-content: center;
flex-direction: column;
}
.background h2,
.background h4 {
text-align: center;
background-color: black;
width: 100%;
}
.background h2 {
padding-top: 20px;
}
.background h4 {
padding-bottom: 20px;
}
/* -------------------------------------------- */
.monthlyImages {
display: flex;
justify-content: center;
flex-wrap: wrap;
position: relative;
top: 90px;
}
.item {
padding: 5px;
}
.item img {
height: 200px;
margin: 10px;
display: block;
}
.item span {
display: block;
padding: 5px;
font-weight: bold;
text-align: center;
}
/* Text */
.monthlyTea {
width: 1000px;
position: relative;
margin: 0 auto;
top: 90px;
display: flex;
justify-content: center;
flex-direction: column;
line-height: 50px;
}
.monthlyTea h2,
.monthlyTea h4 {
text-align: center;
}
/* ------------------------------ */
.flex-container-locations {
background-image: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-locations-background.jpg);
height: 500px;
position: relative;
top: 140px;
justify-content: center;
text-align: center;
display: flex;
margin: 0 auto;
width: 1200px;
}
.flex-container-locations span.title {
display: flex;
position: relative;
top: 40px;
left: 517px;
text-align: center;
font-size: 30px;
font-weight: 900;
}
.left {
display: flex;
justify-content: center;
text-align: center;
flex-direction: column;
line-height: 10px;
}
.left span {
background-color: black;
height: 15%;
padding-top: 20px;
width: 300px;
position: relative;
right: 50px;
margin-right: 40px;
}
.center {
display: flex;
justify-content: center;
text-align: center;
flex-direction: column;
line-height: 10px;
}
.center span {
background-color: black;
height: 15%;
padding-top: 20px;
width: 300px;
position: relative;
right: 50px;
margin-right: 40px;
}
.right {
display: flex;
justify-content: center;
text-align: center;
flex-direction: column;
line-height: 10px;
}
.right span {
background-color: black;
height: 15%;
padding-top: 20px;
width: 300px;
position: relative;
right: 50px;
margin-right: 40px;
}
.Bold-Location {
font-weight: 800;
letter-spacing: 0.5px;
font-size: 25px;
}
/* ----------------------------------------------- */
footer div.Foot-Text{
height: 200px;
position: relative;
top: 150px;
justify-content: center;
text-align: center;
line-height: 50px;
}
footer span {
text-align: left;
margin-left: 20px;
position: relative;
top: 120px;
font-family: Helvetica;
}
