Tea Cozy Project, help/feedback needed

Hello-

I’m trying to finish up this project and have run into a few issues I cannot seem to find a solution to. I would greatly appreciate being pointed in the right direction or any help some one could provide.

The issues;
fixed-Header-I can’t seem to get the nav items to list horizontally and not vertically. I was able to get them listed on the far right side at one point…
fixed-Mission Statement- the black background for the text. even using z index to try and get it to show up isn’t working.
-Locations-the location card themselves will not space out to show the individual boxes. they either bunch in the middle or bunch on the left side on top of each other.

Please let me know if you think its a ruleset in another section messing with these or something else I can try.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styelsheet\style.css">
    <title>The Tea Cozy</title>
</head>

<body>
    <header>
        <div class="logo">
            <img src="styelsheet\img-tea-cozy-logo.png" alt="Tea Cosy logo" height="50px">
        </div>
        <div class="nav">
            <ul>
                <li>Mission</li>
                <li>Featured Tea</li>
                <li>Locations</li>
            </ul>
        </div>
    </header>
    <section class="mission">
        <div class="mission-card">
            <h2>Our Mission</h2>
            <h4> Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade,Organic Tea</h4>
        </div>
    </section>
    <section class="tom">
        <div class="tea-title">
            <h2><strong>Tea of the Month</strong></h2>
            <h4>Whats Steeping at The Tea Cozy?</h4>
        </div>
        <div class="tea-images">
            <div class="img1">
                <figure><img src="styelsheet\img-berryblitz.jpg" width="300px" height="200px"/><figcaption>Fall Berry Blitz Tea</figcaption></figure>
            </div>
            <div class="img2">
                <figure><img src="styelsheet\img-spiced-rum.jpg" width="300px" height="200px"/><figcaption>Spiced Rum Tea</figcaption></figure>
            </div>
            <div class="img3">
                <figure><img src="styelsheet\img-donut.jpg" width="300px" height="200px"/><figcaption>Seasonal Donuts</figcaption></figure>
            </div>
            <div class="img4">
                <figure><img src="styelsheet\img-myrtle-ave.jpg" width="300px" height="200px"/><figcaption>Myrtle Ave Tea</figcaption></figure>
            </div>
            <div class="img5">
                <figure><img src="styelsheet\img-bedford-bizarre.jpg" width="300px" height="200px"/><figcaption>Bedford Bizarre Tea</figcaption></figure>
            </div>
        </div>
    </section>
    <section class="location">
        <div class="title">
            <h2><strong>Locations</strong></h2>
        </div>
        <div class="location-cards">
            <div class="specifics">
                <h3>Downtown</h3>
                <p>384 West 4th St</p>
                <p>Suite 108</p>
                <p>Portland, Maine</p>
            </div>
            <div class="specifics">
                <h3>East Bayside</h3>
                <p>3433 Phisherman's Avenue</p>
                <p>(Northwest Corner)</p>
                <p>Portland, Maine</p>
            </div>
            <div class="specifics">
                <h3>Oakdale</h3>
                <p>515 Crescent Avenue</p>
                <p>Second Floor</p>
                <p>Portland, Maine</p>
            </div>
        </div>
    </section>
    <section class="contact">
    <div>
        <h2><strong>The Tea Cozy</strong></h2>
        <h5>contact@theteacozy.com</h5>
        <h5>917-555-8904</h5>
    </div>
    </section>
</body>
<footer>
    <p class="copy">copyright The Tea Cozy 2017</p>
</footer>
</html>
body {
    font-family: Helvetica, snas-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    box-sizing: border-box;
    display: block;
    
}

/* Navigation bar */
header {
    height: 69px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    position: fixed;
    border-bottom: 1px solid seashell;
    background-color: black;
}
.logo {
    float: left;
    margin: 10px;
}
 .nav {
    margin: 10px;
    justify-content: flex-end;
    text-decoration: underline;
 }
/*mission Statement */
.mission {
    text-align: center;
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*1w0ivgi*_ga*NzM5MDg1ODkyLjE2NDc1MzQyNzk.*_ga_3LRZM6TM9L*MTY2MzYzNjkxNC4zMC4wLjE2NjM2MzY5MTQuNjAuMC4w);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 1200px;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.missiion-card {
    width: 100%;
    height: auto;
    background-color: black;
}

/*Tea of the Month -DONT TOUCH DONE!!!! */
.tom {
    display: inline-flex;
    width: 100%;
    margin: 10px auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.tea-title {
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    margin-top: 50px;
}
.tea-images {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
}
.img1,
.img2,
.img3,
.img4,
.img5 {
    text-align: center;
}
/* Locations */

.location {
    display: inline-flex;
    height: 500px;
    width: 100%;
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*1w0ivgi*_ga*NzM5MDg1ODkyLjE2NDc1MzQyNzk.*_ga_3LRZM6TM9L*MTY2MzYzNjkxNC4zMC4wLjE2NjM2MzY5MTQuNjAuMC4w);
    background-size: cover;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.title {
    display: inline-flex;
    margin-bottom: 15px;
}
.location-cards {
    display: inline-flex;
    margin: 40px;
    width: 300px;
    height: 300px;
    background-color: black;
}
.specifics {
    text-align: center;
}

/* Contact Info */
.contact {
    text-align: center;
    height: 200px;

}

/* footer */

.copy {
    justify-content: flex-start;
    margin: 20px;
}

If you are going to use flex, then it is a combination of things. First, make the ul tag inside of .nav be a display of flex with a justify-content of flex-end. I have included a spoiler below if that isn’t enough information to get you in the right place.


.nav {
    margin: 10px;
    padding: 10px;
    width: 100%;
    text-decoration: underline;
 }
 .nav ul {
   display: flex;
   flex-grow: 1;
   justify-content: flex-end;
   gap: 10px;
 }
 .nav li {
   list-style-type: none;
 }

Thank you so much for helping!

Its seems obvious now that you’ve said to apply it to the ul itself, more confirmation that I was staring at my screen for to long :joy:

that totally fixed my issue with the header;


so much better, thank you!

1 Like

I totally understand! Sometimes it helps to just shut it down and walk away :sweat_smile:

I’ve figured out the mission statement issue! There’s a spelling error in your CSS (missiion-card instead of mission-card).

1 Like

oh dear lord, is there a smack myself in the forehead emoji hahaha

thank you so much! Gonna go back and make sure that’s the only one :smiling_face_with_tear:

1 Like

You should look at the class you are using for the .locations and .locationCards and the HTML. Part of the bunching is the use of flex-direction as column and also that you aren’t treating each card as a separate background.

.location {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 500px;
    width: 100%;
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*1w0ivgi*_ga*NzM5MDg1ODkyLjE2NDc1MzQyNzk.*_ga_3LRZM6TM9L*MTY2MzYzNjkxNC4zMC4wLjE2NjM2MzY5MTQuNjAuMC4w);
    background-size: cover;
    align-items: center;
}
.title {
    display: flex;
    justify-content: center;
    flex-basis: 100%;
    margin-bottom: 15px;
}

.location-cards {
    margin: 40px;
    width: 300px;
    height: 300px;
    background-color: black;
}
1 Like

HTML for the location issue:

 <section class="location">
        <div class="title">
            <h2><strong>Locations</strong></h2>
        </div>
        <div class="location-cards">
            <div class="specifics">
                <h3>Downtown</h3>
                <p>384 West 4th St</p>
                <p>Suite 108</p>
                <p>Portland, Maine</p>
            </div>
            </div>
           <div class="location-cards">
                 <div class="specifics">
                <h3>East Bayside</h3>
                <p>3433 Phisherman's Avenue</p>
                <p>(Northwest Corner)</p>
                <p>Portland, Maine</p>
            </div>
            </div>
              <div class="location-cards">
          
        
            <div class="specifics">
                <h3>Oakdale</h3>
                <p>515 Crescent Avenue</p>
                <p>Second Floor</p>
                <p>Portland, Maine</p>
            </div>
        </div>
    </section>

Thank you so much for helping me with this issue! I apologize for no response I was offline for a few days.

After adjusting my code to your suggestions it has helped with the bunching issue! Again thank you, now I know not to be afraid to separate my sections as much as I need :smiling_face:

2 Likes