I’m having trouble centering the #mission and #locations sections of the page. I’m sure I have some display or position code wrong that is making this happen. Does anyone know why those two ids aren’t centering in the flexbox? I attached my HTML and CSS as well as the Design Spec. All input is welcome.
<!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">
<title>Tea Cozy</title>
<link href='./styles.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="page">
<header class="header">
<img class = "logo" src="./img/img-tea-cozy-logo.png" alt="Tea Cozy Logo" />
<nav class = "navigation">
<ul>
<li><a href="#mission">Mission</a></li>
<li><a href="#featured-tea">Featured Tea</a></li>
<li><a href="#locations">Locations</a></li>
</ul>
</nav>
</header>
<section id="mission">
<span>
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</span>
</section>
<section id="featured-tea">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
<ul class="tea-types">
<li>
<img src="./img/img-berryblitz.jpg" alt="Berry Blitz Tea" />
<h4>Fall Berry Blitz Tea</h4>
</li>
<li>
<img src="./img/img-spiced-rum.jpg" alt="Spiced Rum Tea" />
<h4>Spiced Rum Tea</h4>
</li>
<li>
<img src="./img/img-donut.jpg" alt="Seasonal Donuts" />
<h4>Seasonal Donuts</h4>
</li>
<li>
<img src="./img/img-myrtle-ave.jpg" alt="Myrtle Ave Tea" />
<h4>Myrtle Ave Tea</h4>
</li>
<li>
<img src="./img/img-bedford-bizarre.jpg" alt="Bedford Bizarre Tea" />
<h4>Bedford Bizarre Tea</h4>
</li>
</ul>
</section>
<section id="locations">
<h2 class="locations-header">Locations</h2>
<ul>
<li>
<h2>Downtown</h2>
<p>384 West 4th St.<br />Suite 108<br />Portland, Maine</p>
</li>
<li>
<h2>East Bayside</h2>
<p>3433 Phisherman's Avenue<br />(Northwest Corner)<br />Portland, Maine</p>
</li>
<li>
<h2>Oakdale</h2>
<p>515 Crescent Avenue<br />Second Floor<br />Portland, Maine</p>
</li>
</ul>
</section>
<section class = "contact-us">
<h1> The Tea Cozy</h1>
<h5><a href = "mailto: [email protected]">[email protected]</a></h5>
<h5>917-555-8904</h5>
</section>
</div>
<footer>
<section class = "copyright">
<h5>copyright The Tea Cozy 2017</h5>
</section>
</footer>
</body>
</html>
#page {
justify-content: center;
align-items: center;
align-content: space-between;
flex-direction: column;
}
body {
background-color: black;
color: seashell;
font-size: 22px;
font-family: Helvetica;
opacity: 0.9;
}
.header {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
/* margin: 9.5p 0; */
background: black;
width: 100%;
height: 69px;
border-bottom: 1px solid seashell;
justify-content: space-between;
}
h4 {
margin: 10px;
}
h2 {
margin: 15px;
}
.logo {
display: inline-block;
position: relative;
padding: 9.5px 0 9.5px 10px;
height: 50px;
}
nav {
height: 69px;
vertical-align: middle;
}
header nav ul {
display: inline-flex;
flex-direction: row;
vertical-align: middle;
height: auto;
margin: 18px 0px 22px 22px;
}
header nav li {
display: inline-flex;
padding: 0 20px;
}
.navigation a {
display: flex;
color: seashell;
text-decoration: underline;
font-size: 26px;
align-items: center;
}
.navigation a:hover {
color:seashell;
text-decoration: none;
position: relative;
top: 1px;
left: 1px;
}
#mission {
display: flex;
width: 1200px;
height: 700px;
background-image: url("./img/img-mission-background.jpg");
align-items: center;
justify-content: center;
}
#mission span {
display: flex;
background-color: black;
width: 1200px;
height: auto;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
/* line-height: 20%; */
/* padding: 0 0 15px 0; */
}
#featured-tea h2 {
display: flex;
align-items: center;
justify-content: center;
margin: 50px 0 15px 0;
}
#featured-tea h4 {
display: flex;
align-items: center;
justify-content: center;
}
#featured-tea ul {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
align-content: center;
}
#featured-tea ul li {
padding: 0 25px 10px 25px;
list-style-type: none;
}
#tea-types li h4 {
padding: 10px 0 10px 0;
}
#featured-tea ul li img {
height: 200px;
width: 300px;
}
#locations {
display: flex;
width: 1200px;
height: 500px;
background-image: url("./img/img-locations-background.jpg");
align-items: center;
justify-content: center;
flex-direction: column;
}
.locations-header {
}
#locations ul {
display: flex;
margin: 0px 0px 0 0;
align-items: center;
justify-content: center;
flex-direction: row;
list-style: none;
}
#locations ul li {
background-color: black;
opacity: 1;
margin: 0 40px 0 0;
padding: 0 10px;
text-align: center;
}
#locations ul li p {
text-align: center;
line-height: 50px;
}
.contact-us {
height: 200px;
text-align: center;
}
.copyright {
margin: 0 0 0 20px;
}
Thanks!
David