Tea Cozy SOS

I have been banging my head against the wall trying to do the Tea Cozy project and I feel pretty confident in what I have so far, except for the fact that my Tea of the Month section is being a rebellious little brat and won’t align in a row, no matter what I seem to try.

Code below.

<!DOCTYPE html>
<html>
<head>
  <title>The Tea Cozy</title>
  <link rel="stylesheet" href="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="navigation">
            <a href="#mission"><li>Mission</li></a>
            <a href="#featured"><li>Featured Tea</li></a>
            <a href="#locations"><li>Locations</li></a>
        </ul>
      </div>

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

      <div id="featured">
        <h2>Tea of The Month</h2>
        <h4>What's Steeping at The Tea Cozy</h4>
      </div>

    <div class="trend-contaner">
      <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: Helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
    margin: 0;
}

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

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

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

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

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

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

.mission-txt {
    margin: auto;
    background-color: black;
    width: 100%;    
}

.trend-container {
    max-width: 1000px;
    display: flex;
    height: 1000px;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
}

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

I feel like I’m absolutely just missing something simple and small and it is going so completely and utterly over my head. No matter what I try, the images within the Tea of the Month section won’t stop aligning in a column, despite having never specified the word column anywhere in my code.

Any and all help, critique, and camaraderie for my code bullying me into submission are welcome.

Thanks in advance.

Yes. A typo:

I recommend using the chrome dev tools. You would see that <div class="trend-contaner"> only has default browser styles.

You’re a lifesaver and I am, seemingly, illiterate!

1 Like

You‘re welcome (like is just for the 1st part :wink:)

1 Like