Tea Cozy Project Help - Store Product Images

Hello there! I have been working on the Tea Cozy website project for a few hours now and I am having some trouble getting my layout to match that of the example Tea Cozy design sheet.

Project: https://www.codecademy.com/courses/learn-css/projects/tea-cozy

For some reason I cannot get the images to wrap. Anyone else having this issue or have a solution?

This is how it should look:

This is my first post so it won’t let me embed two images, but mine has everything positioned in the center instead of 3 images on one row and 2 images on a row below that. Any help is greatly appreciated! Thanks!

Here is my HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tea Cozy</title>
<link rel="stylesheet" href="../CSS/TeaCozy.css" type="text/css"/>
</head>

<body>
	
<!-- Header -->
	
	<header class="flex-container">
		<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png"/>
		<nav> 
			<span><a href="#mission">Mission</a></span>
			<span><a href="#store">Featured Tea</a></span>
			<span><a href="#location">Locations</a></span>
		</nav>
	</header>
	
<!-- Main Content Container -->
	
	<div class="main">
	
	<div id="mission"
	class="flex-container">
		<div class="content">
			<h2>Our Mission</h2>
			<h4>Handpicked, Artisinally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
		</div>
		</div>
		
	<div id="products">
			<h2>Tea of the Month</h2>
			<h4>What's steeping at the Tea Cozy?</h4>
	<div class="flex-container items">
		<div class="item">
			<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg"/> 
			<span>Fall Berry Blitz Tea</span>
		<div class="item">	
			<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg"/>
			<span>Spice Rum Tea</span>
		<div class="item">	
			<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg"/>
			<span>Seasonal Donuts</span>
		<div class="item">
			<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg"/>
			<span>Myrtle Ave Tea</span>
		<div class="item">	
			<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg"/>
			<span>Bedford Bizarre Tea</span>
			</div>
			</div>
			
		
		
		</div>		
		
	
</body>
</html>

Here is my CSS:

@charset "UTF-8";
/* CSS Document */

body {
	font-family: Helvetica, sans-serif;
	font-size: 22px;
	color: seashell;
	text-align: center;
	margin: 0;
	align-content: center;
	background-color: black;
}

a {
	color: seashell;
	text-decoration: underline;
}

h2
h3
h4 {
	margin: 0;
	padding: 10px;
}

.flex-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

/* Header Section */

header {
	height: 69px;
	position: fixed;
	width: 100%;
	border-bottom: 1px, solid, seashell;
	background-color: black;
	z-index: 1;
}

header img {
	height: 50px;
	padding: 10px;
	opacity: 0.9;
}

nav {
	text-align: right;
	flex-grow: 1;
}

nav span {
	display: inline-block;
	padding: 20px 10px;
}

/* Main Section */

.main {
	padding-top: 69px;
	opacity: 0.9;
	margin: auto;
	width: 1200px;
}

/* Mission Section */

#mission {
	height: 700px;
	background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);
	padding-top: 70px;
}

#mission .content {
	margin: auto;
	background-color: black;
	width: 100%;
}

/* Products Section */

#products {
	width: 100%;
	margin: auto;
	padding-top: 70px;
	
}

.flex-container-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 80%;
}

.item {
	padding: 5px;
}

.item img {
	height: 200px;
	margin: 10px;
	display: block;
}

.item span {
	text-align: center;
	font-weight: bold;
	display: block;
	padding: 5px;
}

Hi @text9031272065
your CSS is fine. Have a look at the html. Especially the <div>s for the items.

@mirja_t thanks for the response! I figured out that I was missing the closing tags on my

s!

1 Like