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

Get Help HTML
,
#1

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)

#2

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

1 Like
#3

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.

Screen Shot 2021-09-30 at 1.13.14 PM
Screen Shot 2021-09-30 at 1.13.14 PM2872×1464 146 KB

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

Screen Shot 2021-09-30 at 1.15.55 PM
Screen Shot 2021-09-30 at 1.15.55 PM1542×1312 103 KB

#4

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
#5

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

Julie

1 Like