Hi
I’m trying to center the images of the store section but I don’t know why the images 4 and 5 go one under the other. I have checked the lessons but I cannot find the solution. Can someone help me to check my code and advise me on what I’m doing wrong?
I really appreciate your help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="The Tea Cozy" content="width=device-width, initial-scale=1.0">
<title>The Tea Cozy</title>
<link href=".//styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="flex-container">
<img src=".//images/img-tea-cozy-logo.png"/>
<nav>
<spam><a href="#mission">Mission</a></spam>
<spam><a href="#store">Tea</a></spam>
<spam><a href="#location">Locations</a></spam>
</nav>
</header>
<!--Main Content-->
<main>
<!--Mission Section-->
<section id="mission" class="flex-container">
<div class="content">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</section>
<!--Store Items-->
<section id="store">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
<div class="self-container">
<div class="item">
<img src=".//images/img-bedford-bizarre.jpg"/>
<span>Fall Berry Blitz Tea</span>
</div>
<div class="item">
<img src=".//images/img-spiced-rum.jpg"/>
<span>Spiced Rum Tea</span>
</div>
<div class="item">
<img src=".//images\img-donut.jpg"/>
<span>Seasonal Donuts</span>
<div class="item">
<img src=".//images\img-myrtle-ave.jpg"/>
<span>Myrtle Ave Tea</span>
</div>
<div class="item">
<img src=".//images\img-berryblitz.jpg"/>
<span>Bedford Bizarre Tea</span>
</div>
</div>
</section>
<!--Section Store Location-->
<section id="store location">
<h2>Locations</h2>
<div class="self-container location">
<div id="location">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div id="location">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div id="location">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</section>
</main>
<!--Contact-->
<div id="contact">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</div>
<!--Footer-->
<footer>
<h5>copyright The Tea Cozy 2017</h5>
</footer>
</body>
</html>
/* Universal Styles */
body {
background-color: hsl(0, 0%, 0%);
color: seashell;
font-family: "Helvetica", sans-serif;
font-size: 22px;
text-align: center;
margin: 0;
}
a {
color: seashell;
}
h2,
h3,
h4 {
margin: 0;
padding: 10px;
}
.flex-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
/* Header Section */
header {
position: fixed;
width: 100%;
z-index: 1;
height: 69px;
align-items: center;
background-color: hsl(0, 0%, 0%);
}
header img {
height: 50px;
padding-left: 10px;
}
nav {
text-align: right;
flex-grow: 1;
}
/* Mission*/
#mission {
height: 700px;
padding-top: 70px;
background-image: url(".//images/img-bedford-bizarre.jpg");
background-size: cover ;
background-repeat: no-repeat;
background-position: center;
margin: auto;
}
.content {
background-color: hsla(0, 0%, 0%, 0.9);
margin: auto;
width: 100%;
}
/*Store Items*/
#store {
width: 1000px;
height: 700px;
margin: auto;
}
.self-container {
display: inline-flex;
align-items: initial;
justify-content: space-around;
}
.item img {
height: 200px;
width: 300px;
padding: 10px;
}
