Tea Cozy Project - Nav Bar and image positioning trouble

Get Help CSS
#1

Hey everyone! I’ve just recently started the front-end developer course on Codecademy and I’ve reached a sticking point with the Tea Cozy project. I was able to get the images and text in just fine, but I’m having issues getting the navigation bar to be aligned to the right corner of the screen. And the featured tea section wraps so that they are all in one big column, instead of in two rows: 3 on top, 2 on bottom.

Any help would be greatly appreciated! As well as any critiques about formatting and such. I’ve not started the next section of the project yet.

Thank you!

<!DOCTYPE html>
<html>

<head>
    <title>The Tea Cozy</title>
    <link href="styles.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <!--Header-->
    <header class="flex-container">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*1sk46hg*_ga*MTQwNzQ0MTg3OC4xNjU0MzU2NDI2*_ga_3LRZM6TM9L*MTY1OTg3MDI1Ny4zMi4xLjE2NTk4NzA1OTAuNTc.
        " class="logo" />
        <div class="nav">
            <a href=#mission>Mission</a>
            <a href=#featured-tea>Featured Tea</a>
            <a href=#location>Location</a>
        </div>
    </header>

    <!--Main-->
    <div class="main"></div>

    <!--Mission-->
    <div id="Mission">
        <div class="mission-container">
            <div class="text-over">
              <h2>Our Mission</h2>
              <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
    </div>
   
   <!--Featured Tea-->
  <div id='featured-tea'>
    <h1>Tea of the Month</h1>
    <h2>What's Steeping at the Tea Cozy?</h2>
  </div>

    <div class="trend-container">
        <div class="trend">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*1k6iqf9*_ga*MTQwNzQ0MTg3OC4xNjU0MzU2NDI2*_ga_3LRZM6TM9L*MTY1OTg3MDI1Ny4zMi4xLjE2NTk4NzA5NzEuNjA.">
            <h3>Fall Berry Blitz Tea</h3>
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*1k6iqf9*_ga*MTQwNzQ0MTg3OC4xNjU0MzU2NDI2*_ga_3LRZM6TM9L*MTY1OTg3MDI1Ny4zMi4xLjE2NTk4NzA5NzEuNjA.">
            <h3> Spiced Rum Tea</h3>
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*efilc5*_ga*MTQwNzQ0MTg3OC4xNjU0MzU2NDI2*_ga_3LRZM6TM9L*MTY1OTg3MDI1Ny4zMi4xLjE2NTk4NzA5NzEuNjA.">
            <h3>Seasonal Donuts</h3>
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*efilc5*_ga*MTQwNzQ0MTg3OC4xNjU0MzU2NDI2*_ga_3LRZM6TM9L*MTY1OTg3MDI1Ny4zMi4xLjE2NTk4NzA5NzEuNjA.">
            <h3>Myrtle Ave Tea</h3>
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*efilc5*_ga*MTQwNzQ0MTg3OC4xNjU0MzU2NDI2*_ga_3LRZM6TM9L*MTY1OTg3MDI1Ny4zMi4xLjE2NTk4NzA5NzEuNjA.">
            <h3> Bedford Bizarre Tea</h3>
        </div>
    </div>

   </div>

   <!--Location-->
</body>
</html>

body {
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
}
header {
    width: 100%;
    height: 69px;
    display: inline-flex;
    background-color: black;
    position: absolute;
    top: 0px;
    border-bottom: 1px solid seashell;
}
.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

}
.logo {
    height: 50px;
    float: left;
    padding-left: 10px;
    padding-top: 10px
}
.nav {
    height: 100%;
    margin: 0 auto;
}
.nav a {
    height: 100%;
    text-decoration: underline;
    text-align: center;
    align-items: center;
    color: seashell;
    padding: 30px 20px;
}
.mission-container {
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*1cox8wu*_ga*MTQwNzQ0MTg3OC4xNjU0MzU2NDI2*_ga_3LRZM6TM9L*MTY1OTg3MDI1Ny4zMi4xLjE2NTk4NzA5NzEuNjA.");
    background-repeat: no repeat;
    background-position: center;
    height: 700px;
    max-height: 1200px;
    margin: 40px auto 40px auto;
    display: flex;
}
.text-over {
    margin: auto;
    background-color: black;
    width: 100%;
}
.trend-container {
    display: inline-flex;
    height: auto;
    margin: auto;
    flex: 0 0 30%;
    align-items:  space-between;
    justify-content: space-between;
}
.trend img {
    height: 200px;
    width: 300px;
    padding: 10px 10px;
}
1 Like
#2

Hi Sean,

There’s a lot of confusing and contradictory style rules in your CSS. You have a style rule for the header section, and a separate style rule for the class .flex-container. However, these will both apply to the same element! So you need to delete one, and start again with a few lines of CSS to achieve the required look:

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

This will turn your header into a flexbox container, align the items (the logo and the navigation list) in the center vertically, and push the logo all the way to the left, and the nav list all the way to the right. I recommend checking this tutorial for a good explanation of how justify-content works to align items within a container.

Now, problem number two. How to make your featured teas line up nicely? This section should also be a flex container. However, what are the items you want to arrange? Semantically, I believe you want each “feature” to be a picture and it’s heading. So to do that, you would need to alter your HTML so that each img, and it’s associated h3, are contained inside their own div. Like follows:

<div class="trend-container">
        <div class="trend">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*1k6iqf9*_ga*MTQwNzQ0MTg3OC4xNjU0MzU2NDI2*_ga_3LRZM6TM9L*MTY1OTg3MDI1Ny4zMi4xLjE2NTk4NzA5NzEuNjA.">
            <h3>Fall Berry Blitz Tea</h3>
        </div>

        <div class="trend">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*1k6iqf9*_ga*MTQwNzQ0MTg3OC4xNjU0MzU2NDI2*_ga_3LRZM6TM9L*MTY1OTg3MDI1Ny4zMi4xLjE2NTk4NzA5NzEuNjA.">
            <h3> Spiced Rum Tea</h3>
        </div>

        <div class="trend">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*efilc5*_ga*MTQwNzQ0MTg3OC4xNjU0MzU2NDI2*_ga_3LRZM6TM9L*MTY1OTg3MDI1Ny4zMi4xLjE2NTk4NzA5NzEuNjA.">
            <h3>Seasonal Donuts</h3>
        </div>

        <div class="trend">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*efilc5*_ga*MTQwNzQ0MTg3OC4xNjU0MzU2NDI2*_ga_3LRZM6TM9L*MTY1OTg3MDI1Ny4zMi4xLjE2NTk4NzA5NzEuNjA.">
            <h3>Myrtle Ave Tea</h3>
        </div>

        <div class="trend">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*efilc5*_ga*MTQwNzQ0MTg3OC4xNjU0MzU2NDI2*_ga_3LRZM6TM9L*MTY1OTg3MDI1Ny4zMi4xLjE2NTk4NzA5NzEuNjA.">
            <h3> Bedford Bizarre Tea</h3>
        </div>
    </div>

And then to style them, apply the same CSS you used before, on their container:

.trend-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

I’m sorry if this is too wordy. I really need to learn to be succinct. Anyway, I hope it will be useful. Happy coding :slight_smile:

#3

Just to add, the featured tea section could be styled using inline-block display, either :slight_smile: