Tea Cozy Project: Help with Flexboxes and Images

I’m having trouble getting header and the pictures in the tea section of the project to align properly.

HTML:

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="css/teacozy.css">
</head>

<body>
    <header id="header">
        <nav id="nav-bar">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*1vcl6d3*_ga*NTU0ODk4MDc4Mi4xNjc4MTI5MTAy*_ga_3LRZM6TM9L*MTY3ODMxMTU5My41LjEuMTY3ODMxMzYyOS4yOC4wLjA.">
            <ul class="nav-links">
                <li><a href="#">Mission</a></li>
                <li><a href="#">Featured Tea</a></li>
                <li><a href="#">Locations</a></li>
            </ul>
        </nav>
    </header>

    <div class="flex-container">
        <div class="container" id="mission-container">
            <div id="mission-statement">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
    </div>

    <div class="flex-container">
        <div class="container" id="tea-statement">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at the Tea Cozy?</h4>
        </div>
        <div class="container" id="tea-options">
            <div class="card">
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*1waav3n*_ga*Nzg0NTgwNzMzOS4xNjc5MDkyODY0*_ga_3LRZM6TM9L*MTY3OTA5Mjg3My4xLjEuMTY3OTA5NDE1MS40OC4wLjA."><br>
                <h4 class="title">Fall Berry Blitz Tea</h4>
            </div>
            <div class="card">
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*1h1aiau*_ga*Nzg0NTgwNzMzOS4xNjc5MDkyODY0*_ga_3LRZM6TM9L*MTY3OTA5NjI2NS4yLjEuMTY3OTA5NjU5Ny42MC4wLjA."><br>
                <h4>Spiced Rum Tea</h4>
            </div>
            <div class="card">
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*1h1aiau*_ga*Nzg0NTgwNzMzOS4xNjc5MDkyODY0*_ga_3LRZM6TM9L*MTY3OTA5NjI2NS4yLjEuMTY3OTA5NjU5Ny42MC4wLjA."><br>
            <h4>Seasonal Donuts</h4>
            </div>
            <div class="card">
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*1osr9x8*_ga*Nzg0NTgwNzMzOS4xNjc5MDkyODY0*_ga_3LRZM6TM9L*MTY3OTA5NjI2NS4yLjEuMTY3OTA5NjU5Ny42MC4wLjA."><br>
            <h4>Myrtle Ave Tea</h4>
            </div>
            <div class="card"><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*1osr9x8*_ga*Nzg0NTgwNzMzOS4xNjc5MDkyODY0*_ga_3LRZM6TM9L*MTY3OTA5NjI2NS4yLjEuMTY3OTA5NjU5Ny42MC4wLjA."><br>
                <h4>Bedford Bizarre Tea</h4>
            </div>
        </div>
    </div>

    <div class="flex-container">
        <div class="container"></div>
    </div>


</body>

</html>

CSS:

/*All*/
*{
    font-family: Helvetica;
    font-size: 22px;
    opacity: 0.9;
}

/*Header*/

header{
    display: flex;
}

nav{
    border-bottom: 1px solid seashell;
    margin: 3px;
}

#nav-bar{
    height: 69px;
    width: 1220px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

nav img{
    height: 50px;
    width: 150px;
    opacity: 0.9;
    margin-left: 10px;
}

#nav-links{
    align-items: flex-end;
}

nav li{
    display: inline;
    font-size: 22px;
    margin-left: 10px;
}

nav a:link{
    color: seashell;
    opacity: 0.9;
    font-family: Helvetica;
}


/*Body*/

body{
    background-color: black;
}

/*Mission*/

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

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

#mission-container{
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*a0po85*_ga*Nzg0NTgwNzMzOS4xNjc5MDkyODY0*_ga_3LRZM6TM9L*MTY3OTUwODQ1Ny42LjEuMTY3OTUwODUxMy40LjAuMA..);
    background-repeat: no-repeat;
    height: 700px;
    width: 1200px;
}

#mission-statement{
    background-color: black;
    width: 1200px;
    text-align: center;
    margin-top: 325px;
    margin-bottom: 315px;

}

h2{
    color: seashell;
    text-align: center;
}

h4{
    color: seashell;
    font-size: 22px;
    text-align: center;
}

img{
    height: 200px;
    width: 300px;
}

#tea-options{
    display: flex;
    flex-wrap: wrap;
}

Hi, there!

Are you still having problems with alignment? If so, could you provide the link to the specification sheet, please?

Yes, I am still having troubles. This is the project I am working on.

Tea Cozy Project

Thank you, I just need a reminder on the specifications. :slight_smile:

If you look at your .container class, you have the flex-direction set to column. This class is on your tea-options ID which is making the “cards” stack vertically. So, even though you have “wrap” on your tea options and container, it is not doing anything, because there is nothing to wrap.