Hello! I need some CSS Flex guidance on my Tea Cozy Project-Front End Engineering Path

Hello! I am studying the Front End Engineering Path and I’m currently on the Tea Cozy Project. I have gone back to the previous lessons , searched on MDN and googled to try to figure out what i’m doing wrong. I can’t seem to get the navigation positioned properly. I wanted to try and figure it out on my own , but now its been taking too long and I just need to ask for help. Can anyone point me in the right direction?

Thank you,
Julie

My Html below:

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

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

<!--Header and Navigation-->

<body>
    <header>
        <div class="logo">
            <img src="/Users/juliannekropp/Desktop/Coding Projects-Codecademy/Tea Cozy Project/Tea Cozy Resources/img-tea-cozy-logo.webp" alt="Tea Cozy Label">
        </div>

        <div class="links">
            <nav>
                <a href="#mission">Mission</a>
                <a href="#featured tea">Featured Tea</a>
                <a href="#locations">Locations</a>
            </nav>
        </div>
    </header>

</body>

</html>

My CSS Below:

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

header {
    background-color: black;
    border-bottom: 1px solid seashell;
    margin: 69px auto;
    display: flex;
    position: fixed;
}

.logo {
    display: flex;
    min-height: 50px;
}

nav {
    display: flex;
    margin: auto;
}

nav a {
    display: inline-flex;
    color: seashell;
    text-decoration: underline;
    align-content: flex-end;
}

(https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-making-a-website-responsive/modules/fecp-layout-with-flexbox/projects/tea-cozy)

Hi Julie,
could you add a screenshot of your current output and describe what you want to change?

1 Like

Hi yes, so here is my screenshot of what it looks like so far.

Getting my navigation to look correctly is not going as planned.

Then also shown is a screen shot of what project wants us to do and how to re create

There are plenty of additional properties for flexbox styling. You can add properties to the flex items – in your case these are .logo and .links. But in your case, styling the parent element (header) should suffice. Play around with the different values of justify-content. I think what you’re looking for is ‘space-between’.
You find a good guide here:

1 Like

Great! Thank you, i’ll check this out.

Julie

1 Like