Tea Cozy Help - I'm stuck!

Hey! I’m working on the Tea Cozy project and the one thing that is giving me trouble are ‘Tea of the Month’ pictures, since I can’t get them to wrap and I really don’t know where my mistake it. I would really appreciate any pointers as to what I did wrong.
Thanks in advance.
This is my HTML:

<!DOCTYPE html>
<head>
    <title>Tea Cozy</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <header>
<div class="header">
     <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
</div>
    <div class="nav">
            <div>Mission</div>
            <div>Tea</div>
            <div>Location</div>
    </div>
    </header>
<section>
    <div class="banner">
        <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg">
    </div>
    <div class="statement">
        <h2>Our Mission</h2>
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
    </div>
    </section>
    <section>
        <div class="tea-month">
            <div class="headline">
                <h2>Tea of the Month</h2>
                <h3>What's Steeping at the Tea Cozy</h3>
            </div>
            <div class="images">
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-berryblitz.jpg">
                <div class="caption">
                    <h4>Fall Berry Blitz Tea</h4>
                    </div>
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-spiced-rum.jpg">
                <div class="caption">
                    <h4>Spiced Rum Tea</h4>
                    </div>
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-donut.jpg">
                <div class="caption">
                    <h4>Seasonal Donuts</h4>
                    </div>
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
                <div class="caption">
                    <h4>Myrtle Ave Tea</h4>
                    </div>
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
                <div class="caption">
                    <h4>Bedford Bizzare Tea</h4>
                    </div>
            </div>
        </div>
        <section>
            <div class="locations">
            <div class="image">
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-locations-background.jpg">
            </div>
            <div class="headline">
                <h2>Locations</h2>
            </div>
            <div class="downtown">
                <h4>Downtown</h4>
                <h4>384 West 4th St</h4>
                <h4>Suite 108</h4>
                <h4>Portland, Maine</h4>
            </div>
            <div class="bayside">
                <h4>East Bayside</h4>
                <h4>3433 Phisherman's Avenue</h4>
                <h4>Northwest Corner</h4>
                <h4>Portland, Maine</h4>
            </div>
            <div class="oakdale">
                <h4>Oakdale</h4>
                <h4>515 Crescent Avenue</h4>
                <h4>Second Floor</h4>
                <h4>Portland, Maine</h4>
            </div>
            </div>
        </section>
    </section>
    <section>
        <div class="footer">
            <h2>The Tea Cozy</h2>
            <h5>contact@theteacozy.com</h5>
            <h5>9175558940</h5>
        </div>
        <section>
            <div class="copyright">
<h5>copyright The Tea Cozy 2017</h5>
            </div>
        </section>
    </section>
</body>

and this is my CSS:

body {
    background-color: black;
    font-family: Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    opacity: 0.9;
 }
 header {
display: flex;
border-bottom: 1px solid seashell;
 }

.header img {
height: 50px;
padding: 10px;
}

header .nav {
text-decoration: underline;
display: inline-flex; 
justify-content: flex-end;
align-items: center;
height: 69px;
width: 100%;
}

header .nav div {
    padding: 10px;
}


section .banner img {
    height: 700px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

section .statement {
    background-color: black;
    position: relative;
    bottom: 450px;
    opacity: 0.9;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}


section .tea-month .headline {
    text-align: center;
}

section .tea-month .images {
    display: inline-flex;
    justify-content: space-between;
    flex: wrap;
    flex-basis: 1000px;
}

section .tea-month .images img {
    height:200px;
    width: 300px;
    padding: 10px;
    margin: 60px;
}

section .tea-month .caption {
    display: flex;
    margin: auto;
}

section .locations {
    position: relative;
    }

section .locations .headline {
    position: absolute;
    top: 100px;
    left: 680px;
}

section .locations .image {
    display: flex;
    justify-content: center;
align-items: center;
}

section .locations .image img {
height: 700px;
width: 1200px;
}

section .locations .downtown {
    background-color: black;
    position: absolute;
    top: 205px;
    left: 200px;
    width:300px;
    height: auto;
    padding: 5px;
    text-align: center;
    opacity: 1;
    margin: 40px;
}

section .locations .bayside {
    background-color: black;
    position: absolute;
    top: 205px;
    left: 560px;
    width: 300px;
    height: auto;
    padding: 5px;
    text-align: center;
    opacity: 1;
    margin: 40px;
}

section .locations .oakdale {
    background-color: black;
    position: absolute;
    top: 205px;
    left: 915px;
    width: 300px;
    height: auto;
    text-align: center;
    padding: 5px;
    margin: 40px;
}

section .footer {
    height: 200px;
    text-align: center;
}

section .copyright {
    margin: 20px;
    text-align: left;
}

Hi, welcome to the forum.

Here is my equivalent to your section .tea-month . images entry in your CSS file.

#fleximages {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

Try that in place of your own and see how you get on.

On an aside, while your code will work selecting nested elements (.class element) when they get long it’s quite messy and hard to pick out what each line of code is affecting. Classes and ids are there to make life easier, especially when you start using javaScript too.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.