Flexbox Issues - Tea Cozy Project

Hello Community,

I am struggling with an advanced CSS course problem. In the exercise for the flexbox model “Cozy Tea”, the 5 different images including the text are to be aligned in the flexbox container.The finished website is given as design-spec under:

https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-redline.jpg.

Under “Tea of the Month”, the flexbox items are to be aligned next to each other with a width of 300px in the 1000px container. Unfortunately, I cannot manage to align three elements (images) next to each other in the first row of the container before jumping to the next row with flex-wrap. In my code, only two images are aligned next to each other before jumping to the next row.

If I change the width of the images to 250px, then three are displayed side by side in the first row.

I am desperate and hope that someone here can help me! Thank you and best regards, Philipp.

Here is my HTML-Code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cozy Tea</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div class="header"> <div class="style-header"> <img id="logo" src="media/img-tea-cozy-logo.png"> <ul class="nav-list"> <li class="nav-items"><a>Mission</a></li> <li class="nav-items"><a>Featured Tea</a></li> <li class="nav-items"><a>Locations</a></li> </ul> </div> </div> <div class="content"> <div class="container-1"> <div class="banner-1"> <h2>Our Mission</h2> <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trage, Organic Tea</h4> </div> </div> <div class="container-2"> <h2>Tea of the Month</h2> <h4>What's Steeping at The Tea Cozy?</h4> <div class="pictures"> <figure><img src="media/img-berryblitz.jpg" class="images"><h4>Fall Berry Blitz Tea</h4></figure> <figure><img src="media/img-spiced-rum.jpg" class="images"><h4>Spiced Rum Tea</h4></figure> <figure><img src="media/img-donut.jpg" class="images"><h4>Seasonal Donuts</h4></figure> <figure><img src="media/img-myrtle-ave.jpg" class="images"><h4>Myrtle Ave Tea</h4></figure> <figure><img src="media/img-bedford-bizarre.jpg" class="images"><h4>Bedford Bizarre Tea</h4></figure> </div> </div> <div class="container-3"></div> <div class="container-4"></div> </div> </body> </html> ```

This is my CSS as far:

``` *{ background-color: #000; font-family: Helvetica, sans-serif; color: #fff; } .header{ display: fixed; } .style-header{ display: flex; height: 69px; border-bottom: 1px solid seashell; justify-content: space-between; align-items: center; } #logo{ height: 50px; margin-left: 10px; } .nav-list{ display: flex; flex-direction: row; list-style: none; padding-right: 10px; } .nav-items{ padding-left: 20px; } .nav-items a{ text-decoration: underline; font-size: 22px; } /*Content*/ .content{ display: flex; justify-content: space-between; flex-direction: column; align-items: center; text-align: center; } .container-1{ width: 1200px; height: 700px; background-image: url(media/img-mission-background.jpg); background-size: cover; display: flex; align-items: center; justify-content: center; } .banner-1{ width: 100%; } .container-2{ width: 1000px; } .pictures { display: flex; flex-direction: row; flex-wrap: wrap; } .images{ width: 300px; height: 200px; } ```

You forgot to justify-content: center in .pictures.

And figure has a pretty big margin by default it seems.
So what I did was set the margin to 0px for each figure in .pictures.
After this, I set the flex-basis to 33% so each flex item can take up only one third of the width.

There is some difference in spacing between the design specs and the result but it’s not that big. I don’t think anyone would notice if they weren’t actively looking for it.

.pictures {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.pictures figure {
    margin: 0px;
    flex-basis: 33%;
}
1 Like

Thank you! At least it was the default-margin of the figure element. I appreciate your help. This is a much better solution than putting every picture and h4 into another div just to align them in the right way.