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

I have the same problem

Hi there!

The answers these two gave me helped to point me in the right direction. One of the main issues I discovered was that I created more divs within my container div for the store that were not needed. Take a look back through your code and make sure you didn’t do the same. Good luck!!!

Hi Jackrie

Thank You for your advice.
Still, I have no idea what the problem might be. I don’t know why the images 4 and 5 go one under the other.

<!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>contact@theteacozy.com</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;
}

Hi glandaeta31,

I took a look at your code and it looks like you are missing a closing tag underneath seasonal donuts. Once you put that in there it will help, but it looks like you’ll have some more tinkering to do with your CSS to get the results you want. I hope this helps!