Tea Cozy - Need Help Centering Items Using Flexbox!

Hi! I’m working on the Tea Cozy project and for some reason can’t get the Features section items to center. The h4s are center aligned under the imgs, but for some reason I can’t get the .trend img containers center aligned! Could anyone double check my code and see if I’ve missed something? I’ve gone through numerous forum posts and even re-wrote my code to match a solution video… no luck. Thanks in advance!

<!DOCTYPE html>
<html>
<head>
  <title>The Tea Cozy</title>
  <link rel="stylesheet" href="./Resources/style.css" type="text/css" />
</head>
  <body>
      <div class="header">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" class="logo">
        <ul class="nav">
            <a href="#Mission"><li>Mission</li></a>
            <a href="#Features"><li>Featured Tea</li></a>
            <a href="#Location"><li>Location</li></a>
        </ul>
      </div>

      <div id="Mission">
          <div class="mission-container">
              <div class="text-over">
                  <h2>Our Mission</h2>
                  <h4>Handpicked, Artisianally Curated, Free Range, Sustainible, Small Batch, Fair Trade, Organic Tea</h4>
              </div>
          </div>
      </div>

      <div id="Features">
          <h2>Tea of the Month</h2>
          <h4>What's Steeping at the Tea Cozy?</h4>
      </div>
      <div class="trend-container">
        <div class="trend">
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg">
          <h4>Fall Berry Blitz Tea</h4>
        </div>
        <div class="trend">
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg">
          <h4>Spiced Rum Tea</h4>
        </div>
        <div class="trend">
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg">
          <h4>Seasonal Donuts</h4>
        </div>
        <div class="trend">
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
          <h4>Myrtle Ave Tea</h4>
        </div>
        <div class="trend">
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
          <h4>Bedford Bizarre Tea</h4>
        </div>
      </div>
  </body>
</html>
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
}

.header {
  width: 100%;
  height: 69px;
  border-bottom: 1px solid seashell;
  display: block;
  top: 0px;
  position: fixed;
  z-index: 100;
  background-color: black;
}

.logo {
  height: 50px;
  float: left;
  padding-left: 10px;
  padding-top: 10px;
}

.nav {
  float: right;
  height: 100%;
  margin: 0 auto;
}

.nav a {
  height: 100%;
  display: table;
  float: left;
  padding: 0px 20px;
}

.nav a li {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    text-decoration: underline;
    color: seashell;
}

.mission-container {
  background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);
  background-repeat: no-repeat;
  background-position: center;
  height: 700px;
  max-width: 1200px;
  margin: 40px auto;
  display: flex;
}

.text-over {
  margin: auto;
  background-color: black;
  width: 100%;
  text-align: center;
}

#Features {
  text-align: center;
}

.trend-container {
  display: inline-flex;
  max-width: 1000px;
  height: auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.trend img {
  height: 200px;
  width: 300px;
  padding: 10px 10px;
}

.trend h4 {
  text-align: center;
}

2 Likes

Hi @eelsupinsideya

You got these image containers to align center as well as I can see here. But you set the parent container to inline-flex instead of flex. That means that the container doesn’t take the whole viewport width anymore. If you put a red border around .trend-container you can see its width.

2 Likes

Thanks so much for taking the time to look through this, @mirja_t ! I had tried changing it to flex, but unfortunately that didn’t change anything. I added the red border and switched between flex and inline-flex, but it showed no difference between the two.

I ended up just adding a margin-left: 15% to .trend-container, which did finally center the container, but kind of defeats the purpose of the project, which is to use flexbox. Oh well :woman_shrugging:

You also have a max-width of 1000px in the container. What is your viewport width when you encounter that problem? Why did you put a max-width in there?

1 Like

I put the max-width of 100px because it was specified in the design spec, linked here. My viewport width is 1440px. Would a max-width on the container affect it’s ability to be centered using flexbox?

Ok, I thought it’s all about aligning the children and you wanted the parent container to stretch.
display: flex; and justify-content: center; only affect the child elements. If you want to center the container using flex-box, you’d have to wrap it in another container and set that to display: flex, too. But that would mess your HTML structure unnecessarily. So I’d say using margin: auto is perfectly fine here. And you did use flex-box, so the purpose of the exercise is met, I think.

1 Like

Thank you @mirja_t , I really appreciate all your help on this. The scope of learning all this can be so overwhelming. Thanks again for taking the time to respond!

1 Like