Hey everyone! Not really a question, just looking to share my solution for the Tea Cozy Project. Might not be perfect (I couldn’t get the bottom border to work but I’m happy with where I got). Code isn’t clean, I’ll just leave it here if anyone feels like giving me some tips 
<!DOCTYPE html>
<html>
<head>
<title>Tea Cozy</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header><img src="img-tea-cozy-logo.png">
<div><h1>
Mission
</h1>><h1>
Featured Tea
</h1><h1>
Locations
</h1></div>
</header>
<main><div class="mission"> <div class="center"><h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4></div>
</div>
<div class="month">
<div class="center"><h2>Tea of the Month</h2><h4>What's Steeping at The Tea Cozy?</h4></div>
<div class="imgtxt"><img src="img-berryblitz.jpg"><h4>Fall Berry Blitz</h4></div>
<div class="imgtxt"><img src="img-spiced-rum.jpg"><h4>Spiced Rum Tea</h4></div>
<div class="imgtxt"><img src="img-donut.jpg"><h4>Seasonal Donuts</h4></div>
<div class="imgtxt"><img src="img-myrtle-ave.jpg"><h4>Myrtle Ave Tea</h4></div>
<div class="imgtxt"><img src="img-bedford-bizarre.jpg"><h4>Bedford Bizarre Tea</h4></div>
</div>
<div>
<div class="locations"> <div id="locate"><h2>Locations</h2></div>
<div class="black"><h2>Downtown</h2><h4>384 West 4th St</h4><h4>Suite 108</h4><h4>Portland, Maine</h4></div>
<div class="black"><h2>East Bayside</h2><h4>3433 Phisherman's Avenue</h4><h4>(Northwest Corner)</h4><h4>Portland, Maine</h4></div>
<div class="black"><h2>Oakdale</h2><h4>515 Crescent Avenue</h4><h4>Second Floor</h4><h4>Portland, Maine</h4></div>
</div>
</div>
</div>
<div class="center"><h2 class="cozy">The Tea Cozy</h2><h5>contact@theteacozy.com
</h5><h5>917-555-8904</h5></div>
</main>
<footer><h3>copyright The Tea Cozy 2017</h3></footer>
</body>
</html>
html {
display: flex;
justify-content: center;
background-color: black;
font-family: Helvetica;
font-size: 22px;
opacity: 0.9;
color: seashell;
}
body {
justify-content: center;
}
header {
display: inline-flex;
height: 70px;
box-sizing: border-box;
margin-bottom: 1px solid seashell;
width: 100%;
justify-content: space-between;
background-color: black;
}
header img {
height: 50px;
padding: 10px;
}
header h1 {
display: inline-flex;
text-decoration: underline;
padding: 0px 5px;
font-size: 1rem;
}
main {
}
.mission {
display: flex;
background-image: url("img-mission-background.jpg");
height: 700px;
width: 1200px;
flex-flow: column wrap;
align-items: center;
align-content: center;
}
.center {
align-items: center;
background-color: black;
text-align: center;
margin: auto;
width: 100%;
}
.center h2, .center h3, .center h4, .center h5 {
margin: 20px 0px;
font-weight: 700;
}
.month {
margin:auto;
display: flex;
width: 1000px;
flex-flow: row wrap;
justify-content: space-evenly;
}
.month img {
height: 200px;
width: 300px;
}
.imgtxt {
display: flex;
flex-flow: column;
align-items: center;
width: 300px;
}
.locations {
display: flex;
background-image: url("img-locations-background.jpg");
height: 700px;
width: 1200px;
flex-flow: row-reverse wrap;
align-items: center;
align-content: center;
justify-content: center;
display: inline-flex;
}
#locate {
width: 1000px;
display: flex;
align-items: center;
justify-content: center;
}
#locate h2 {
display: flex;
align-content: center;
align-items: center;
}
.locations h3, .locations h4 {
align-items: center;
text-align: center;
}
.black {
display: flex;
background-color: black;
align-content: center;
align-items: center;
flex-flow: column;
margin: 15px 20px;
width: 300px;
}
.cozy {
padding-bottom: 20px;
}
footer h3 {
padding: 20px;
}