Responsive Web Design Projects - Build a Personal Portfolio Webpage

Can someone tell me why if I run the tests on freecodecamp it tells me that I’m not fullfilling the last requirment? (the navbar should always be at the top of the viewport)

If I run the tests on CodePen everything’s all right, but on FCC it doesn’t work for some reason.

I even tried to specify with #navbar {position: fixed}, but that isn’t working either

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

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!-- START NAV BAR -->
<header id="header">

<img
src="https://lh3.googleusercontent.com/evVCAPq7fgvJTGQ6Pj2WfuIX1X7GoO_Wh2eEA2Lv5hzcAM5H-F9U1ZyFOEl44031rmQlMomq4m9NGyzgNKF4tgSXR6Wcug2ST_Aiha71TFQkFEq08ZKgx7zLD9Yk0C0aau7Ndktpxw=w2400?source=screenshot.guru"
  alt="SM_logo"
  id="SM_logo"
  width="200px";>

  <nav id="navbar">
  
  <h3> Sara Morelli 
  &nbsp; &nbsp; &nbsp;
     
    <a class="nav-link" href="#welcome-section"> Me, Myself and I </a>
    <a class="nav-link" href="#projects"> Portfolio </a>
    <a class="nav-link" href="#flaws"> Flaws </a>
    <a class="nav-link" href="#contacts"> Contacts </a>
   </h3>
    
  </nav>
</header>
<!-- END NAV BAR -->

<!-- START WELCOME SECTION -->
<section id="welcome-section">

<h1>Sara Morelli</h1>
<h2>Professional Tax Payer</h1>

</section>
<!-- END WELCOME SECTION -->

<!-- START PROJECTS SECTION --> 
<section id="projects">
<h3>Portfolio</h3>
 
<div class="projects-grid">
<nav id="projectsbar">
  
  <a id="profile-link" class="project-tile" target="_blank" href="https://www.freecodecamp.org/fcc60f4267f-41f5-469d-8263-9502a5da18e0">
    My Works
  </a>
  
  <a id="My_Initiatives" class="project-tile" target="_blank" href="https://codepen.io/sarida/full/KKmqgBO">
    My Initiatives
  </a>
  
  <a id="My_Business" class="project-tile" target="_blank" href="https://codepen.io/sarida/full/PomjrJz">
    My Business
  </a>
  
</nav>
</div>  

</section>
<!-- END PROJECTS SECTION -->
/* file: styles.css */
/* START NAVBAR */
header {
position: fixed;
top: 0px;
width: 100%;

height: 25px;
padding: 25px 0px;

display: flex;
justify-content: space-between;
align-items: center;

background-color: #fee9e4;
opacity: 0.8;

z-index: 5;
}

header a {
margin-right: 2rem;
color: #963552;

text-decoration: none;
z-index: 5;
}

header a:hover {
margin-right: 2rem;
color: #b67286;
}

#navbar {
position: fixed;
}
/* END NAVBAR */

/* START BACKGROUND IMAGES */
.background_grid {
display: grid;

justify-content: center;
align-items: center;

grid-template-columns: 100%;
grid-gap: 0px;

width: 100%;
height: auto;

z-index: -2;
}

/* START WELCOME SECTION */

#welcome-section {
text-align: center;
padding: 0px 55px;

width: 100%;
height: 100vh;

position: absolute;
top: 10vw;
left: 0vw;
z-index: 2;
}

#welcome-section h1 {
font-size: 3vw;
color: silver;

position: absolute;
top: 5vw;
left: 7vw;
}

#welcome-section h2 {
font-size: 4vw;
color: silver;

position: absolute;
top: 10vw;
left: 7vw;

border-bottom: 1px solid silver; 
padding-bottom: 3px;
border-bottom-width: 1px; 

word-spacing: 2px;
letter-spacing: 4px;
}

/* END WELCOME SECTION */

/* START PROJECT-SECTION */
#projects {
width: 100%;
height: auto;

position: absolute;
top: 46vw;
left: 0vw;
z-index: 2;
}

#projects h3 {
text-align: left;
font-size: 3vw;
color: gray;

position: absolute;
top: 2vw;
left: 2vw;

border-bottom: 1px solid silver;
border-bottom-width: 1px;

word-spacing: 2px;
letter-spacing: 4px;
}

#projectsbar {
display: flex;
justify-content: center;
align-items: center;
text-align: center;

position: absolute;
top: 13vw;
left: 2vw;

width: 100%;
height: auto;

font-size: 3vw;
letter-spacing: 5px;
}

#projectsbar a{
margin-right: 11vw;
margin-left: 11vw;
color: #963552;

text-decoration: none;
z-index: 2;
}

#projectsbar a:hover {
margin-right: 11vw;
margin-left: 11vw;
color: #b67286;

font-weight: bold;
z-index: 2;
}

/* END PROJECT-SECTION */



/* START FOR MOBILE PHONES */
@media only screen and (max-width: 800px)
{
header {
  position: absolute;
  top: 0px;
  width: 100%;
  
  height: 2vw;
  padding: 25px 0px;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  backround-color: #fee9e4;
  opacity: 0.7;
  
  z-index: 5;
}

}
  **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: Responsive Web Design Projects - Build a Personal Portfolio Webpage

Link to the challenge:

As far as the tests are concerned, setting it to position fixed isn’t enough. You also need to set top to 0. If this is passing in codepen using the testing library then obviously there is a difference between the two. Not sure if that is intentional?

if that doesnt work sometimes left 0 is needed aswell but it depends on your code

thank you so much!! It finally ran correctly. Have a great day :)))

thank you!! thankfully top 0px was enough. Have a great day :)))