This is my solution to The Tea Cozy Project. I managed to make the website look as close to the design as i could but i had a lot of trouble with the positioning of the background images on the page. I also think that I could cut some of my code by a lot so any feedback will be greatly appreciated. 
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="./recourses/index.css">
<title>Tea Coazy</title>
</head>
<body>
<!-- Header -->
<header class="header-container">
<img src="./recourses/images/img-tea-cozy-logo.png" alt="Tea Cozy Logo">
<ul class="nav">
<li><a href="#">Mission</a></li>
<li><a href="#">Featured Tea</a></li>
<li><a href="#">Locations</a></li>
</ul>
</header>
<!-- Main -->
<main>
<!-- Our Mission -->
<section class="our-mission">
<div class="banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</section>
<!-- Tea of the Month -->
<section class="tea-otm">
<div class="tea-top">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="tea-img">
<div>
<img src="./recourses/images/img-berryblitz.jpeg" alt="">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div>
<img src="./recourses/images/img-spiced-rum.jpeg" alt="">
<h4>Spiced Rum Tea</h4>
</div>
<div>
<img src="./recourses/images/img-donut.jpeg" alt="">
<h4>Seasonal Donuts</h4>
</div>
<div>
<img src="./recourses/images/img-myrtle-ave.jpeg" alt="">
<h4>Myrtle Ave Tea</h4>
</div>
<div>
<img src="./recourses/images/img-bedford-bizarre.jpeg" alt="">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</section>
<!-- Locations -->
<section class="location-container">
<div class="location-title">
<h2>Locations</h2>
</div>
<div class="address">
<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>
</section>
<section>
<div class="contact">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<p>917-555-8904</p>
</div>
</section>
<footer>
<div class="copyright">
<p>Copyright The Tea Cozy 2017</p>
</div>
</footer>
</main>
</body>
</html>
CSS
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
color: seashell;
font-family: 'Helvetica', sans-serif;
font-size: 22px;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
background-color: black;
height: 69px;
border-bottom: 1px solid seashell;
width: 100%;
}
.header-container {
display:flex;
padding-top: 10px;
padding-left: 10px;
justify-content: space-between;
position: fixed;
}
.header-container img {
height: 50px;
}
.header-container ul {
display: flex;
align-items: center;
list-style: none;
padding-right: 10px;
gap: 10px;
}
.header-container a {
color: seashell;
}
/* Our Mission Section */
.our-mission {
background-image: url('./images/img-mission-background.jpeg');
height: 700px;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
}
.banner {
background-color:black;
display: inline-block;
justify-content: center;
height: 100px;
margin-top: 300px;
padding-top: 10px;
width: 1200px;
}
.banner h2 {
padding-bottom: 20px;
margin: 0 auto;
}
/* Tea of the Month Section */
.tea-otm {
width: 1000px;
margin-top: 100px;
margin: 0 auto;
}
.tea-top {
margin-top: 100px;
padding-bottom: 20px;
}
.tea-top h2 {
padding-bottom: 30px;
}
.tea-top h4 {
padding-bottom: 10px;
}
.tea-img {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
.tea-img img {
height: 200px;
width: 300px;
}
/* Locations Section */
.location-container {
background-repeat: no-repeat;
background-position: center;
height: 500px;
background-image: url('./images/img-locations-background.jpeg');
margin-left: 20px;
margin-top: 50px;
}
.location-title {
margin-bottom: 15px;
padding-top: 40px;
}
.address {
display: flex;
justify-content: center;
gap: 40px;
}
.box{
background-color: black;
width: 300px;
height: 300px;
padding: 10px;
padding-top: 40px;
}
.box p {
padding-top: 30px;
}
/* footer */
.contact {
margin-top: 10px;
height: 200px;
}
.contact h2 {
padding-bottom: 40px;
}
.contact h5 {
padding-bottom: 20px;
}
footer {
text-align: left;
padding-left: 20px;
margin-bottom: 20px;
}