This project definitely caused some headaches here and there but it was a great learning experience and it felt amazing to finally figure some things out on my own. I think I stuck to the design spec pretty faithfully.
Something I still can’t figure out, however, is how to make the background image show like it did in the design spec. Its like the coffee cup is not showing as much as it does in the design spec. If anyone can enlighten me on to make it match the design spec then that’d be great! I tried to use ‘background-image: center’ and ‘background-image: cover’ like I had seen other people do in their projects but it still didn’t match.
Anyway, here’s my code. Critique welcome of course! 
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tea Cozy</title>
</head>
<header>
<div class="header">
<img id='logo' src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*1mpgb60*_ga*MTYzMDg2NjYzOS4xNjU3Mzc2NTk0*_ga_3LRZM6TM9L*MTY3MDM1MjY5OC4xNS4xLjE2NzAzNTI3MDMuNTUuMC4w"/>
<ul class="nav">
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
</header>
<body>
<div class="mission">
<div class="mission-text-bar">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<div class="tea-of-mo-text">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy</h4>
</div>
<div class="tea-of-mo">
<div class="tea-of-mo-images">
<div class="tea-w-text">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*1gf56np*_ga*MTYzMDg2NjYzOS4xNjU3Mzc2NTk0*_ga_3LRZM6TM9L*MTY3MDgwMzM1OC4yNS4xLjE2NzA4MDMzNjMuNTUuMC4w"
alt="straight down view into tea cup with berries in tea">
<h4>Fall Berry Blitz</h4>
</div>
<div class="tea-w-text">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*pbaf1u*_ga*MTYzMDg2NjYzOS4xNjU3Mzc2NTk0*_ga_3LRZM6TM9L*MTY3MDgwMzM1OC4yNS4xLjE2NzA4MDMzNjMuNTUuMC4w"
alt="opened box with, assumed, foil bag of tea">
<h4>Spiced Rum Tea</h4>
</div>
<div class="tea-w-text">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*14vg3d2*_ga*MTYzMDg2NjYzOS4xNjU3Mzc2NTk0*_ga_3LRZM6TM9L*MTY3MDgwMzM1OC4yNS4xLjE2NzA4MDMzNjMuNTUuMC4w"
alt="donut on a plate">
<h4>Seasonal Donuts</h4>
</div>
<div class="tea-w-text">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*1wntdy4*_ga*MTYzMDg2NjYzOS4xNjU3Mzc2NTk0*_ga_3LRZM6TM9L*MTY3MDgwMzM1OC4yNS4xLjE2NzA4MDMzNjMuNTUuMC4w"
alt="partially obscured by a thin vail, straight down view into a cup of tea">
<h4>Myrtle Avenue Tea</h4>
</div>
<div class="tea-w-text">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*11m7nwp*_ga*MTYzMDg2NjYzOS4xNjU3Mzc2NTk0*_ga_3LRZM6TM9L*MTY3MDgwMzM1OC4yNS4xLjE2NzA4MDMzNjMuNTUuMC4w"
alt="sugar jar next to cup of tea">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</div>
<div class="locations-container">
<div class="location-text">
<h2>Locations</h2>
</div>
<div class="location-panels-container">
<div class="location-panel">
<h3>Downtown</h3>
<h4>384 West 4th St</h4>
<h4>Suite 108</h4>
<h4>Portland, Maine</h4>
</div>
<div class="location-panel">
<h3>East Bayside</h3>
<h4>3433 Phisherman's Avenue</h4>
<h4>(Northwest Corner)</h4>
<h4>Portland, Maine</h4>
</div>
<div class="location-panel">
<h3>Oakdale</h3>
<h4>515 Crescent Avenue</h4>
<h4>Second Floor</h4>
<h4>Portland, Maine</h4>
</div>
</div>
</div>
<div class="contact-container">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</div>
<div class="copyright">
<h5>copyright The Tea Cozy 2017</h5>
</div>
</body>
</html>
/*Logo and navigaton fixed at the top*/
.header {
position: fixed;
top: 0;
width: 100%;
background-color: black;
border-bottom: 1px solid seashell;
display: flex;
justify-content: space-between;
margin-left: -8px;
}
.nav{
margin-right: 20px;
}
.nav li{
text-decoration: underline;
display: inline;
margin-right: 10px;
}
#logo {
height: 50px;
padding-left: 10px;
}
/*Overall Styling*/
body{
background-color: black;
font-family: Helvetica, Arial, sans-serif;
color: seashell;
margin-top: 69px;
opacity: .7;
font-size: 22px;
}
/*Mission section with background image and mission statement*/
.mission{
margin: auto;
display: flex;
justify-content: center;
align-items: center;
height: 700px;
width: 1200px;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*1jdpq8m*_ga*MTYzMDg2NjYzOS4xNjU3Mzc2NTk0*_ga_3LRZM6TM9L*MTY3MDc3NjMwOS4yMy4xLjE2NzA3ODEzODAuNTcuMC4w");
}
.mission-text-bar{
background-color: black;
width: 1200px;
display: flex;
flex-direction: column;
align-items: center;
}
/*Tea of The Month Section*/
.tea-of-mo-text{
display: flex;
flex-direction: column;
align-items: center;
}
.tea-of-mo{
margin:auto;
width: 1000px;
display: flex;
}
.tea-of-mo-images{
margin: auto;
max-width: 1000px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.tea-w-text h4{
text-align: center;
margin-top: 10px;
}
img{
height: 200px;
width: 300px;
margin-right: 20px;
}
/*Locations*/
.locations-container{
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*19jxs06*_ga*MTYzMDg2NjYzOS4xNjU3Mzc2NTk0*_ga_3LRZM6TM9L*MTY3MDgwMzM1OC4yNS4xLjE2NzA4MDMzNjMuNTUuMC4w");
height: 500px;
width: 1200px;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.location-panels-container{
display: flex;
width: 980px;
justify-content: space-between;
align-items: center;
margin-bottom: 50px;
}
.location-panel{
background-color: black;
height: 300px;
width: 300px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
/*Contact Info*/
.contact-container{
height: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
/*Copyright*/
.copyright{
margin: 20px;
}