Tea Cozy Project - stuck

Hi together!

I am stuck in the Tea Cozy Project. Actually it looks like this:

I don´t know how to get the text centered above and below the Cards. And the cards need to be in one height. Here is my code:

HTML:

<!DOCTYPE html>
<html>
    <link href="styles.css" rel="stylesheet" type="text/css">

<head>
    <title></title>
</head>

<body>
    <header class="flex-container">
        <img src="img-tea-cozy-logo.png" type=".png">
        <nav>
            <span><a href="#mission">Mission</a></span>
            <span><a>Featured Tea</a></span>
            <span><a>Locations</a></span>
        </nav>
    </header>

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


        <div id="teas" class="flex-container">
            <h2>Tea of the Month</h2>
            <h3>What´s Steeping at The Tea Cozy?</h3>
        </div>
        <div class="flex-container">
            <figure>
                <img class="tea-image" src="img-berryblitz.jpg">
                <figcaption>Fall Berry Blitz Tea</figcaption>
            </figure>
            <figure>
                <img class="tea-image" src="img-spiced-rum.jpg">
                <figcaption>Spiced Rum Tea</figcaption>
            </figure>
            <figure>
                <img class="tea-image" src="img-donut.jpg">
                <figcaption>Seasonal Donuts</figcaption>
            </figure>
            <figure>
                <img class="tea-image" src="img-myrtle-ave.jpg">
                <figcaption>Myrtle Ave Tea</figcaption>
            </figure>
            <figure>
                <img class="tea-image" src="img-bedford-bizarre.jpg">
                <figcaption>Bedford Bizarre Tea</figcaption>
            </figure>
        </div>
    </main>
    <section>
        <div id="locations" class="flex-container">
            <h2 id="location-title">Locations</h2>
            <div class="location-card">
            <h2>Downtown</h2>
            <h3>384 West 4th St</h3>
            <h3>Suite 108</h3>
            <h3>Portland, Maine</h3>
            </div>
            <div class="location-card">
            <h2>Downtown</h2>
            <h3>384 West 4th St</h3>
            <h3>Suite 108</h3>
            <h3>Portland, Maine</h3>
            </div>
            <div class="location-card">
            <h2>Downtown</h2>
            <h3>384 West 4th St</h3>
            <h3>Suite 108</h3>
            <h3>Portland, Maine</h3>
            </div>
            <h2>The Tea Cozy</h2>
        </div>
    </section>
    <footer>
    <div class="flex-container"></div>
    </footer>
</body></html>

CSS:

body {
    margin: 0;
    background-color: black;
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    
    opacity: 0.9;
    text-align: center;
    border-bottom: 1px solid seashell;
    z-index:0;
}

header{
    width: 100%;
    height: 69px;
    position: fixed; 
    background-color: black; 
    z-index: 2;
}

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

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

header nav{
    text-align: right;
 
}

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

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

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

.content {
    background-color: black;
    width: 1200px;
    height: 150px;
    color: seashell;
    align-items: center;
    text-align: center;
    margin-top: 200px;
    justify-content: center;
}


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

#teas {
    width: 100%;
    height: 200px;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

#locations {
    background-image: url("img-locations-background.jpg");
    width: 1200px;;
    height: 500px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;

}

#location-title {
    align-content: center;
    text-align: center;
}

.location-card {
    background-color: black;
    padding: 50px;
    margin: 40px;
    width: 200px;
    height: 150px;
    position: relative;
    align-items: center;
    
}

.location-card h2 {
    font-size: 1.2rem;
}

.location-card h3 {
    font-size: 1rem;
}




.tea-images {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-around;
    position: relative;
}

figure {
    flex-direction: column;
    padding: 0;
    margin: 15px;
}

.tea-image{
    width: 300px;
    height: 200px;
    
}

figcaption {
    padding-top: 10px;
    font-weight: bold;
    font-size: 0.9rem;
}




footer {
    height: 500px;
}

.topics {
    
}

I worked through all topics before and thought to have understood everything. But while working on the Tea Cozy project I found it very hard to master this project. How has it been to you?

1 Like

With your code here,

Your flex items are showing up in a column that wraps and is centered, so first is your h2 locations, then underneath that is your 1st card, then it wraps over for the second card, and wraps again for the last card and h2 underneath that. If there was enough room in the div, everything would be in one column in the middle of the div, which is not what the project is asking for. (Speaking of, it is useful to place a link to the project so your readers know what you are referring to.)

I recently finished this project, so I know the struggles you are dealing with, but you’ve got this! :wink: I don’t want to give too much away to you because there is so much satisfaction in figuring it out on your own, but I will say this:

Could you try declaring your flex- box in another way?

1 Like

Thanks for your answer. I will try to change the code mostly on my own.

1 Like

No problem, if you have any questions I will try to respond quickly