So, I don’t see what I’m doing wrong. I have put position:fixed in my navbar, and I’m still not getting past the point " Your #navbar element should always be at the top of the viewport." Please Help
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://kit.fontawesome.com/bbd7bd7262.js"
crossorigin="anonymous"
></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css" />
<title>Document</title>
</head>
<body>
<nav id="navbar">
<a class="navbar-items" href="#welcome-section">Welcome</a>
<a class="navbar-items" href="#projects">Projects</a>
<a class="navbar-items" href="#contact">Contact</a>
</nav>
<section id="welcome-section">
<h1>Welcome to my portfolio</h1>
</section>
<section id="projects">
<h1>Projects</h1>
<div id="flexbox">
<div class="project-tile">
<a href="https://codepen.io/ajoanaverde/pen/vYxXLJa"
><img
src="https://logo-marque.com/wp-content/uploads/2020/11/Red-Bull-Logo.png"
alt=""
/></a>
</div>
<div class="project-tile">
<a href="https://codepen.io/ajoanaverde/pen/NWpzmbg"
><img
src="https://i.ytimg.com/vi/K5VXWV4N6f0/maxresdefault.jpg"
alt=""
/></a>
</div>
</div>
</section>
<section id="contact">
<a
target="_blank"
id="profile-link"
href="https://www.freecodecamp.org/joanamartins"
>by Joana Martins</a
>
<div id="icons">
<a href="https://twitter.com/Joana_Verde">
<i class="fa-brands fa-square-twitter"></i> Twitter</a
>
<a href="https://gitlab.com/ajoanaverde">
<i class="fa-brands fa-gitlab"></i> Gitlab</a
>
<a href="mailto:joana.martins.pro@gmail.com">
<i class="fa-solid fa-at"></i> Send an email</a
>
</div>
</section>
</body>
</html>
@media only screen and (min-width: 992px) {
body {
background-color: rgb(17, 17, 39);
color: whitesmoke
}
a {
color: aliceblue;
text-decoration: none;
}
#navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 100;
background-color: #cc0000;
color: white;
font-family: 'Exo 2', sans-serif;
}
.navbar-items {
color: beige;
font-size: 30px;
text-decoration: none;
}
.navbar-items:hover{
color: beige;
font-size: 30px;
background-color: rgb(19, 19, 66);
}
#welcome-section {
min-height: 100vh ;
padding-top: 40vh;
display: flex;
justify-content: center;
}
#projects {
background-color: rgb(49, 49, 131);
margin-top: 100px;
padding-top: 100px;
}
#projects, h1 {
text-align: center;
}
#flexbox{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: space-around;
gap: 20px;
row-gap: 20px;
column-gap: 20px;
margin-bottom:50px ;
padding-bottom: 20px;
}
.project-tile, img {
max-width: 500px;
}
#profile-link {
display: flex;
justify-content: center;
}
#contact {
height: 100vh;
padding-top: 45vh;;
}
#profile-link {
}
#icons {
padding-top: 15px;
display: flex;
justify-content: center;
column-gap: 15px;
}
}```