Layout #1. The navbar should always be at the top of the viewport

hi, i’m doing the landing product page and i’m using visual studio code. i’ve passed 16/16 of the requirements, however, when i paste it at code pen the said challenge doesn’t pass.
can someone help me?

here’s my code:

EDIT: i’m not being able to share the link so i’ll just post the code here:



#nav-bar{position: fixed;

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;

#box-container {
    height: 200px;
    width: 1000px;
grid-gap: 50px;
text-align: center;


  #box-1 {
    background-color: rgb(210, 214, 218);
    width: 33%;
    height: 100%;
    border: 2px solid black;

  #box-2 {
    background-color: rgb(210, 214, 218);
    width: 33%;
    height: 100%;
    border: 2px solid black}

    #box-3 {
    background-color: rgb(210, 214, 218);
    width: 33%;
    height: 100%;
    border: 2px solid black}

    background-color: rgb(255, 255, 255);

    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;

    display: block;
max-width: 15%;
height: auto;

    text-align: center;

    text-align: center;

#submitbutton {

h1 {text-align: center;

h2 {text-align: center;

h3{text-align: center;

#ytvideo {display: flex;
align-items: center;


<main id="main">
<div class="row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>

<header id="header">
    <nav id="nav-bar">
        <a class="nav-link" href="#class1">ola</a>
        <a class="nav-link" href="#class2">tchau</a>
        <a class="nav-link" href="#class3">yeah</a>
        <img class="center" id="header-img" src="">

<p>HandCrafter master little pieces</p>

    <form action="" id="form">
   <label id="email-label">
       <div id="email1">Email: 
        <BR><input type="email" name="email" size=75 maxlength=50 value="" id="email" placeholder="Your best e-mail" required pattern="[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*"><BR></div></label>

            <div id="submitbutton">
                <input type=submit value="Submit" id="submit" class="btn"></input>

                <h1>PREMIUM MATERIALS</h1>
                <h2>FAST SHIPPING
                <h3>QUALITY ASSURANCE
            <div id="ytvideo">
        <embed> <iframe id="video" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class="row">
                <div id="class1" class="column">example</div>
                <div id="class2" class="column">example</div>
                <div id="class3" class="column">example</div>
              <div id="box-container">
                <div id="box-1"><div id="ytvideo">
                    </div><a1>the cheap one</a1></div>
                <div id="box-2"><a2>the kinda expensive one</a2></div>
                <div id="box-3"><a3>the one you should buy (make me rich)</a3></div>
hello world
        <script src="">



You’ve posted a link to FCC’s pen, not yours.

Make sure you’re logged into your codepen acc’t so you can paste code and save it.

hello, i made sure i was logged and clicked the share button and copied the link of my project. anyway, the code is posted in the edit. thanks.

The style element is used when you use internal styling in HTML. Do not use it in CSS and especially do not use it in codepen. It will give undesired results.

You can click on the red button when a test fails. It will tell you what the test was looking for and give you info on how to correct the issue.
Also, you have elements out of order. Everything the browser renders belongs in the body element.
You can review this for an understanding of the HTML boilerplate tags

Why can’t you post your codepen link?

Edit: and please watch the language

Okay, thanks, it worked. for the previous works it hadn’t been a problem, so i couldn’t understand why it happened this time. also thanks for the body element tip.

The ‘Save’ option disappeared after my first saved project and i saw a message saying “auto-save is enabled” so i thought there was no need to manually save. i edited my saved project replacing it’s code with the new one, and the save button was there so i think i managed to save it and will post the link now:

Edit: okay figured out: i couldn’t save because i was using a template from other account apparently. (it was the page i was redirected to by clicking the project’s description code pen link. so i started a new project and it worked now.

hahah i was rushing and did that without even thinking but forgot later about it. took me some time to realize what you were talking about. sorry, wasn’t supposed to go public. already changed it hahaha. thanks for the attention, wouldn’t want to submit it as a finalized project. i’m feeling kinda ashamed right now really.

1 Like