Responsive Web Design Projects - Build a Product Landing Page - _o0fBP_MrBX_uNHxuxlO_

Tell us what’s happening:
Describe your issue in detail here.
I have one mission to complete: ( Your #nav-bar should always be at the top of the viewport) and I don’t know why my code doesn’t work. I hope anyone tells me the answer.

**Your code so far**
/* file: index.html */
<link rel="stylesheet" href="styles.css">

<header id="header">
    <nav id="nav-bar">
        <a class="nav-link" href="#form">Feature</a>
        <a class="nav-link" href="#video">How it works</a>
        <a class="nav-link" href="#submit">Pricing</a>
    <img src="" alt="" id="header-img">
    <form id="form" action="">
        <h1>Handcrafted, home-made masterpieces</h1>
        <input id="email" type="email" name="email" required placeholder="Enter your email">
        <input id="submit" type="submit" value="GET STARTED">

    <video id="video" width="560" height="315" controls autoplay mutedsrc=""></video>

/* file: styles.css */

max-width: 400px;
display: flex;
justify-content: space-between;
flex-direction: column;

max-width: 800px;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;

@media (maxwidth="720px") {
    max-width: 200px;
**Your browser information:**

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

Challenge: Responsive Web Design Projects - Build a Product Landing Page

Link to the challenge:

Try to do some research about position property.

1 Like

oh… I see it.
position: fixed;
top: 0;

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