Hey, I am currently doing the landing page project, it’s not quite done but I keep getting the “23. Your #nav-bar should always be at the top of the viewport.” message. This is the only thing I am struggling to fix, as the nav-bar is behaving properly; it IS fixed to the top of the viewport. What am I doing wrong? Sorry for the messy code btw…
<!-- file: index.html --><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content:"width=device-width,initial-scale=1.0"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bitcount+Single+Ink:wght@100..900&display=swap" rel="stylesheet">
</head>
<header id="header">
<img id="header-img" src="https://down-yuantu.pngtree.com/element_our/bg/20201015/bg/615ca0df05dcb_2368958.png?e=1759327425&st=NjA3ZWY5YjQxNzIzZmY4ZjVmNzJlMzZmYjlhNzBmNTQ&n=—Pngtree—green+gradient+semicircle+3d+element_5540755.png"/>
<h1>ThinkTank Robotics</h1>
<div class="nav-bar">
<nav id="nav-bar">
<a class="nav-link" href="#features">Features</a>
<a class="nav-link" href="#video">Demo</a>
<a class="nav-link" href="#pricing">Pricing</a>
</nav>
</div>
</header>
<div class="features" id="features">
<ul>
<li class="ai">AI</li><p>Our deep learning model</p>
<li class="general">General</li><p>Our general assistant model</p>
<li class="factory">Factory</li><p>Our factory robotics models</p>
</ul>
</div>
<main>
<div class="demo">
<video id="video"src="https://www.pexels.com/download/video/6450803/">
</div>
<div class="pricing"id="pricing">
<div class="pricing1">Our AI assistants can be</div><div class="pricing2">Our general assistants can be</div><div class="pricing3">Our factory assistants can be</div>
</div>
</main>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" class="email"name="email"type="email" placeholder="email">
<input type="submit" class="button"id="submit" href="https://www.freecodecamp.com/email-submit">
</html>
nav{
background-color:#0e2f2b;
position:fixed;
top:0;
left:0;
z-index:3;
width:100%;
padding:0;
margin:0;
}
nav a{
font-family: "Atkinson Hyperlegible Mono";
background-color:#0e2f2b;text-decoration:none;
color:#ffffff;
z-index:2;
margin-left:20px;
letter-spacing:5px;
}
main{
display:flex;
justify-content:center;
margin-left:30%
}
.bitcount-single-ink-<uniquifier> {
font-family: "Bitcount Single Ink", system-ui;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
font-variation-settings:
"slnt" 0,
"CRSV" 0.5,
"ELSH" 0,
"ELXP" 0,
"SZP1" 0,
"SZP2" 0,
"XPN1" 0,
"XPN2" 0,
"YPN1" 0,
"YPN2" 0;
}
.atkinson-hyperlegible-mono-<uniquifier> {
font-family: "Atkinson Hyperlegible Mono", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}
*{
background-color:#ebfff7;
font-family:sans-serif;
color:#040404;
}
header img{
position:absolute;
z-index:1;
top:22px;
left:0px;
width:26%;
background-color:#daffee;
}
header h1{
font-family: "Bitcount Single Ink", system-ui;
font-size:40px;
color:#0E2F2B;
font-weight:200;
background-color:#daffee;
text-align:center;
position:absolute;
top:-4px;
left:70px;
}
.demo{
width:200px;
height:112px;
display:flex;
place-content:center;
margin-bottom:40px;
margin-top:20px;
border:double;
border-color:#0e2f2b;
}
.button{
background-color:#0E2F2B;
color:#ffffff;
display:block;
margin:0 auto;
}
form{
background-color:#daffee;
display:block;
margin:0 auto;margin-bottom:7px;
margin-top:8px;
text-align:center;
}
ul{
margin-top:200px;
font-size:30px;
position:relative;
left:120px;
}
li{
margin-top:60px;
padding-left:20px;list-space-position:outside;
font-family: "Atkinson Hyperlegible Mono";
background-color:#daffee;
}
.ai{
display:list-item;
list-style-image:url(https://cdn-icons-png.flaticon.com/128/14461/14461649.png);
}
.general{
display:list-item;
list-style-image:url(https://cdn-icons-png.flaticon.com/128/1545/1545730.png);
}
.factory{
display:list-item;
list-style-image:url(https://cdn-icons-png.flaticon.com/128/18934/18934965.png);
}
p{
font-size:14px;
font-family: "Atkinson Hyperlegible Mono";
}
.features{
height:30%;
}
@media screen and (min-width:200px){
h1{
}
}
.pricing{
display:grid;
gap:12px;
grid-template-columns: 1fr 1fr 1fr;grid-template-rows: auto auto;
place-content:center;
margin-top:200px;
margin-bottom:40px;
margin-left:-190px;
width:100%;
}
.pricing div{
font-family: "Atkinson Hyperlegible Mono";
display:block;
text-align:center;
margin:0 auto;
}/* file: styles.css */
User Agent is
Product Landing Page - Build a Product Landing Page
ILM
October 2, 2025, 2:36pm
2
there are syntax errors in your code, you should start fixing those
within CSS, HTML or both?
ILM
October 2, 2025, 2:48pm
4
both
you can use this html validator Ready to check - Nu Html Checker
and this css validator The W3C CSS Validation Service
feel free to ask questions for any confusing error
1 Like
thank you, I fixed every error except two CSS that confuse me, they are Parse errors regarding the fonts I embedded, but I don’t know where exactly these errors are located, especially as this was pasted code from google fonts. Also the navbar issue is persisting.
ILM
October 2, 2025, 4:49pm
6
where did you find this code? this is not a valid class name, that’s the parse error
dupont.alexandre:
font-weight: <weight>;
this is also not valid css
dupont.alexandre:
font-weight: <weight>;
1 Like
Thank you so much, I no longer have any syntax errors that are detected, however the navbar issue is still going on, it’s the only test that won’t check.
ILM
October 2, 2025, 5:10pm
8
please post your updated code
nav{
background-color:#0e2f2b;
position:fixed;
top:0;
left:0;
z-index:3;
width:100%;
padding:0;
margin:0;
}
nav a{
font-family: "Atkinson Hyperlegible Mono";
background-color:#0e2f2b;text-decoration:none;
color:#ffffff;
z-index:2;
margin-left:20px;
letter-spacing:5px;
}
main{
display:flex;
justify-content:center;
margin-left:30%
}
.bitcount-single-in{
font-family: "Bitcount Single Ink", system-ui;
}
.atkinson-hyperlegible-mono{
font-family: "Atkinson Hyperlegible Mono", sans-serif;
}
*{
background-color:#ebfff7;
font-family:sans-serif;
color:#040404;
}
header img{
position:absolute;
z-index:1;
top:22px;
left:0px;
width:26%;
background-color:#daffee;
}
header h1{
font-family: "Bitcount Single Ink", system-ui;
font-size:40px;
color:#0E2F2B;
font-weight:200;
background-color:#daffee;
text-align:center;
position:absolute;
top:-4px;
left:70px;
}
.demo{
width:200px;
height:112px;
display:flex;
place-content:center;
margin-bottom:40px;
margin-top:20px;
border:double;
border-color:#0e2f2b;
}
.button{
background-color:#0E2F2B;
color:#ffffff;
display:block;
margin:0 auto;
}
form{
background-color:#daffee;
display:block;
margin:0 auto;margin-bottom:7px;
margin-top:8px;
text-align:center;
}
ul{
margin-top:200px;
font-size:30px;
position:relative;
left:120px;
}
li{
margin-top:60px;
padding-left:20px;
font-family: "Atkinson Hyperlegible Mono";
background-color:#daffee;
}
.ai{
display:list-item;
list-style-image:url(https://cdn-icons-png.flaticon.com/128/14461/14461649.png);
}
.general{
display:list-item;
list-style-image:url(https://cdn-icons-png.flaticon.com/128/1545/1545730.png);
}
.factory{
display:list-item;
list-style-image:url(https://cdn-icons-png.flaticon.com/128/18934/18934965.png);
}
h2{
font-size:14px;
font-family: "Atkinson Hyperlegible Mono";
}
.features{
height:30%;
}
@media screen and (min-width:768px){
}
.pricing{
display:grid;
gap:12px;
grid-template-columns: 1fr 1fr 1fr;grid-template-rows: auto auto;
place-content:center;
margin-top:200px;
margin-bottom:40px;
margin-left:-190px;
width:100%;
}
.pricing div{
font-family: "Atkinson Hyperlegible Mono";
display:block;
text-align:center;
margin:0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Landing page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bitcount+Single+Ink:wght@100..900&display=swap" rel="stylesheet">
</head>
<header id="header">
<img alt="logo" id="header-img" src="https://down-yuantu.pngtree.com/element_our/bg/20201015/bg/615ca0df05dcb_2368958.png?e=1759327425&st=NjA3ZWY5YjQxNzIzZmY4ZjVmNzJlMzZmYjlhNzBmNTQ&n=—Pngtree—green+gradient+semicircle+3d+element_5540755.png">
<h1>ThinkTank Robotics</h1>
<div class="nav-bar">
<nav id="nav-bar">
<a class="nav-link" href="#features">Features</a>
<a class="nav-link" href="#video">Demo</a>
<a class="nav-link" href="#pricing">Pricing</a>
</nav>
</div>
</header>
<div class="features" id="features">
<ul>
<li class="ai">AI
<h2>Our deep learning model
</h2></li>
<li class="general">General
<h2>Our general assistant model
</h2></li>
<li class="factory">Factory
<h2>Our factory robotics models
</h2></li>
</ul>
</div>
<main>
<div class="demo">
<video id="video" src="https://www.pexels.com/download/video/6450803/"></video>
</div>
<div class="pricing" id="pricing">
<div class="pricing1">Our AI assistants can be</div><div class="pricing2">Our general assistants can be</div><div class="pricing3">Our factory assistants can be</div>
</div>
</main>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" class="email" name="email" type="email" placeholder="email">
<input type="submit" class="button" id="submit" formtarget="https://www.freecodecamp.com/email-submit">
</form>
</html>
ILM
October 3, 2025, 3:29pm
13
the tests are checking for header or one of its children, nav is not a children of the header, so if you have that one fixed it’s not satisfying the tests
<header id="header">
<nav id="nav-bar">
<a class="nav-link" href="#features">Features</a>
<a class="nav-link" href="#video">Demo</a>
<a class="nav-link" href="#pricing">Pricing</a>
</nav>
This is the change I just made in the HTML. It’s now the immediate child of the header
header nav{
position:fixed;
top:0;
}
And this in CSS, I truly don’t know what i’m doing wrong
ILM
October 3, 2025, 8:57pm
15
please share all your code again, so I can test it
it finally worked! thank you so much for your time