Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

How can I move the lists on navigation bar to the top right side?
Your code so far

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width:device-width initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    </head>
    <body>
        <header id="header">
            <div class="logo">
                <img id="logo-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" >
            </div>
            <nav id="navbar">
                <ul>
                    <li><a href="#feature">Feature</a></li>
                    <li><a href="#how_it_works">How It Works</a></li>
                    <li><a href="#Pricing">Pricing</a></li>
                </ul>
            </nav>
        </header>


*, ::after, ::before {
    box-sizing: border-box;
    display:block;
    margin:0;
}
body {
    background-color:whitesmoke;
    font-family:Arial, Helvetica, sans-serif

}

img {
    display:flex;
    width:400px;
    height:auto;
    
}

#navbar {
    position:fixed;
    top:0;
    z-index:1;
    width:100%;
    overflow:hidden;
    background-color:whitesmoke;
}

nav li a {
    color:black;
    
    display:block;
    float:left;
    text-align:center;
    padding-right:60px;
    top:0;
    right:0;
    text-decoration:none
}

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

try putting the whole element immediately after the body opening tag

3

hmm i dont understand :p…

4

your navbar element is located after the div .logo element right now.
maybe you need to move it higher up so it is the highest element on the page?

6

thanks!:slight_smile: now it’s somehow on top. however, the right order is that logo should come first after the list element…

7

Did the test pass after you moved it?

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.