Tea Cozy Project - Help Needed

First off I am not seeing the format code button in the toolbar. This means my code may need reformatted if I don’t do this right so I apologize in advance.

I’m needing to get my navigation links to the top right of my page but for some reason when I use the top and right selectors the nav bar doesn’t move… what am I doing wrong AND why doesn’t this work?

    <!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <header>
    <div class="header">
        <div class="logo">
    <img src="upload://cmnJHt0R6TdQOWCxR6fhjD7iihu.png" alt="logo">
        <!--Trying to move #nav-->
        <ul id="nav">
        <li><a href="/index.html">Mission</a></li>
        <li><a href="/index.html">Featured Tea</a></li>
        <li><a href="/index.html">Locations</a></li>
    </ul>
</div>
</div>
</div>
    </header>
</body>

</html>

CSS

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

header {
    height: 69px;
    border-bottom: 1px solid seashell;
    display: inline-flex;
    position: fixed;


}

#logo {
    right: 10px;
    height: 50px;
    display: flex;
    border-bottom: 1px soid seashell;
    position: relative;
    
}
.nav {

    left: 10px;
    margin: 10px;
    position: relative;
    right: 10px;
    height: 50px;
}

ul {
    list-style: none;

}

HTML

Your HTML is not valid. It has one closing div tag more than opening div tags.

CSS

header

The header does not need to be inline-flex. Set it to flex and 100% width.

unordered list

Also set the ul to display: flex, because you want the list elements to next to each other. If you want to move the list to the right, either use justify-content on the parent element or justify-self on the ul element.

#nav vs .nav

Your ul element has a nav id – not a nav class.

Flexbox

You find a good overview of flex boxes and the available attributes for justify-content here:

1 Like

I read the complete guide to flexbox CSS-Tricks guide. Thank you, but I’m still not understanding why my ul element is sitting underneath my logo.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <header>
    <div class="header">
        <div class="logo">
    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*w0zmkc*_ga*NDY4MjAxMDk2MC4xNjcxNTU1MTY3*_ga_3LRZM6TM9L*MTcwMTYwNTMwNC42Mi4xLjE3MDE2MDY4MzkuMzkuMC4w" alt="logo"/>
        <!--Trying to move #nav-->
        <ul id="nav">
        <li><a href="/index.html">Mission</a></li>
        <li><a href="/index.html">Featured Tea</a></li>
        <li><a href="/index.html">Locations</a></li>
    </ul>
</div>
</div>
    </header>
    <!--THIS IS ALL COMMENTED OUT I NEED TO SOLVE THE ABOVE FIRST
    <div class="main">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*146n66f*_ga*NDY4MjAxMDk2MC4xNjcxNTU1MTY3*_ga_3LRZM6TM9L*MTcwMTY5NDAyNC40OC4xLjE3MDE3MDE0MjQuNjAuMC4w" alt="background">
    <h2 id="mission-header">Our Mission</h2>
    <h4 id="mission">Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
    </div>
</body>

</html> -->

CSS

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

header {
    height: 69px;
    border-bottom: 1px solid seashell;
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    justify-content: space-between;


}
.header {
    display: flex;
    flex-direction: row;

}

#logo {
    right: 10px;
    height: 50px;
    display: flex;
    border-bottom: 1px solid seashell;
    display: flex;
    flex-shrink: 3;
    
}
#nav {

    left: 10px;
    margin: 10px;
    position: relative;
    right: 10px;
    height: 50px;
    border-bottom: 1px solid seashell;
}

ul {
    list-style: none;
    display: flex;
    

}

My thought process is that using right should move the logo 10px from the right and using justify-content space between should make them both at least appear on the same line…

Close the div tag around the logo image – but exclude the ul element. I overlooked that extra div the first time.
Then the items are displayed next to each other.
If you then add the styles you attached to the header element to the header class, the alignment also works. Or better: remove the div.header entirely and apply all styles to the header element.
position relative and the right attribute are unnecessary. That would only work for a position: absolute element – but flexbox is the better approach.