Tea Cozy Project - I'm stuck :(

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>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;
}

1 Like

I’d take this in mozilla, and inspect the boxes that are being thrown down. You can see what the specific css making it do that: (this button helps you hover and select specific elements). Screen Shot 2020-06-29 at 10.24.12 AM

I’d recommend going through this documentation also!: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

1 Like