Why is this not right? Nav-bar at the top of viewport

I am having trouble getting my project to pass. My nav-bar is at the top, but somehow the code doesn’t pass. What am I missing?


<div><nav id="nav-bar">
             <a class="nav-link" href="#how-it-works">How It Works</a>
          
          <a class="nav-link" href="#packages">Packages</a>
        <a class="nav-link" href="#pricing">Pricing</a>
    </nav></div>

#nav-bar {
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    background-color: #ffbcd9; }


.nav-link { 
display: flex;
align-items: center;
    text-decoration: none;
    color: black; 
    width: 100%; }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like