Tea Cozy Project -- Tea of the Month Images Not Displaying Properly

I tried to follow along with this project, but I am hung up on trying to figure out why my “Tea of the Month” images are not displaying properly. I have copy and pasted the HTML and CSS below.

They are displaying like this
Screen Shot 2020-05-21 at 10.48.53 AM

<!DOCTYPE html>
<html>

<head>
    <title>The Tea Cozy</title>
    <link href="resources/style.css" type="text/css" rel="stylesheet"/>
</head>

<body>
    <!--Header-->
    <header class="flex-container">
        <img src="resources/images/img-tea-cozy-logo.png"/>
        <nav>
            <span><a href="#mission">Mission</a></span>
            <span><a href="#store">Featured Tea</a></span>
            <span><a href="#locations">Locations</a></span>
        </nav>
    </header>
    <!--Main-->
    <div class="main">

    <!--Mission-->
      <div 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>
      </div>

    <!--Store-->
        <div id="store">
            <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="resources/images/img-berryblitz.jpg"/>
                    <span>Fall Berry Blitz Tea</span>
                <div class="item">
                    <img src="resources/images/img-spiced-rum.jpg"/>
                    <span>Spiced Rum Tea</span>
                <div class="item">
                    <img src="resources/images/img-donut.jpg"/>
                    <span>Seasonal Donuts</span>
                <div class="item">
                    <img src="resources/images/img-myrtle-ave.jpg"/>
                    <span>Myrtle Ave Tea</span>
                <div class="item">
                    <img src="resources/images/img-bedford-bizarre.jpg"/>
                    <span>Bedford Bizzare Tea</span>
                </div>
            </div>
        </div>

    <!--Locations-->
        <div id="locations">
            <h2>Locations</h2>
            <div class="flex-container locations">
                <div class="location">
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="location">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>
                    <p>(Northwest Corner)</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="location">
                    <h3>Oakdale</h3>
                    <p>3515 Crescent Avenue</p>
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>
            </div>
        </div>

    <!--Contact-->
        <div id="contact">
            <h2>The Tea Cozy</h2>
            <h5>contact@theteacozy.com</h5>
            <h5>917-555-8904</h5>
        </div>

    <!--Footer-->
        <footer>
            <h5>Copywright The Tea Cozy 2017</h5>
        </footer>

    </div>
</body>

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

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

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

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

/* Header */

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

header img {
    height: 50px;
    padding-left: 10px;
}

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

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

/* Main */

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

/* Mission */

#mission {
    background-image: url(/resources/images/img-mission-background.jpg);
    height: 700px;
    padding-top: 70px;
}

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

/* Store */

#store {
    height: 700px;
    width: 1000px;
    margin: auto;
    padding-top: 70px;
}

.item {
    padding: 5px;
}

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

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

/* Location */

.flex-container.locations {
    padding-top: 5px;
}

#locations {
    background-image: url("/resources/images/img-locations-background.jpg");
    height: 500px;
    padding-top: 70px;
}

#locations .flex-container {
    margin: auto;
    width: 1100px;
}

.location {
    opacity: 1.0;
    padding: 10px;
    margin: 5px 20px;
    background-color: black;
    flex-basis: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Contact */

#contact {
    height: 200px;
}

/* Footer */

footer {
    text-align: left;
    padding-left: 20px;
}

Hello @jackrie!! Welcome to the forums :grinning:
If I understand correctly, you want the pictures to be center underneath their corresponding <h4> element, please correct me if I am wrong about this.

Have you tried:

display: flex;
margin: auto;

Hopefully this is helpful :slight_smile:

Thank you! That does center them, but I am trying to have them display like this:

Hi,

you should create a CSS selector for your

<div class="flex-container items">

in your *.css file. (Rename it to “flex-container-items”)

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

My css-code ist not the solution. I didn’t test it. Here is a link that explains flexboxes (in that case for a horizontal navigation bar). It helped me alot to understand Flexboxes: Flexbox

2 Likes