[TEA COSY PROJECT] Why does my header navigation not spread out - logo left, nav items right?

Feeling stupid and can’t get the easiest thing to work. I’m on the verge of tears.

I just want my header to look like the one in the project. The Logo is supposed to be left, the nav items all right. But the nav items don’t move.

Here’s my code:
HTML:

   <header class="navigation">
        <div class="header-img"><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="Logo" height="50px">
        </div>
        <div class="links">
        <nav>
            <span><a href=#Mission>Mission</a></span>
            <span><a href=#FeaturedTea>Featured Tea</a></span>
            <span><a href=#Locations>Locations</a></span>
        </nav>
    </div>
    </header>

CSS:

body {
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
}

a {
    color: seashell;
}

nav {
    float: right;
}

nav span {
    display: inline-block;
    padding: 20px 20px;
}

.navigation {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

header img {
    height: 50px;
    padding-left: 10px;
    float: left
}

header {
    border-bottom: 1px seashell;
    position: fixed;
    height: 69px;
    align-items: center;
    width: 100%;
}

Header looks like that:


Please help.

Hi @eagernoob
no tears please, you’re almost there…
First, remove the flex-wrap property from the .navigation class, you do not want the children to display on multiple lines.
Then also remove the float: left and float: right properties from header img and .navigation. You don’t need them. The justify-content: center;does the trick. If you kept them, you’d have to swap them.

Thanks Mirja for taking the time and the kind words! I just did what you said, but it’s still the same result?!?

Which browser are you using? It displays correctly on mine (Safari, Opera, Chrome), even with the superfluous properties…
Another possibility is your html. I just see your header. What is wrapped around it?

I tried it on Chrome and Edge (don’t judge, company standard).

There’s not much going on in the HTML, maybe i’m missing something?

<!DOCTYPE html>
<html>
<head>
<title>Tea Cozy</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
    <!--header section-->
    
    <header class="navigation">
        <div class="header-img"><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="Logo" height="50px">
        </div>
        <div class="links">
        <nav>
            <span><a href=#Mission>Mission</a></span>
            <span><a href=#FeaturedTea>Featured Tea</a></span>
            <span><a href=#Locations>Locations</a></span>
        </nav>
    </div>
    </header>

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

  <!--Teesorten-->

  <!--Locations-->
  <!--Footer-->
</body>
</html>

Ok, I didn’t test it on Edge, but I don’t think that there is an issue with Edge. And as long as your Chrome version isn’t extremely old, that’s fine as well.
0ne last question: What’s the resolution of your device?

Im using 1920 x 1080

Ok, that’s definitively large enough for all elements to display on one line. Can you attach a screenshot? The one attached is what it is supposed to look like, right? If not, I completely misunderstood your intention and then I’d need a screenshot of what it is supposed to look like. Or a link to the project.

Reading your first post again, I think I misunderstood what you are trying to do, sorry.
In order to attach the logo on the left and the links on the right, remove the
justify-content: center property from
.navigation.
Remove the floats. Instead, add

display: flex;
flex-grow: 1;
justify-content: flex-end;

to .links. Then you have it.

Thank you, that works! It looks like I need to revisit the positioning course again…

1 Like