I'm a beginner making my portfolio for a freeCodeCamp assignment currently. I intend for my navbar elements to be displayed horizontally, with specfic font and styling elements, but none of these are being applied to the navbar. The rest of my CSS code works just fine, it's only the section for the navbar that doesn't seem to be doing anything. It remains in the generic font with the elements displayed vertically no matter what I do. What is it that I am missing? Attached is my code.
I've tried moving the navbar elements around the html document and within different elements, but nothing has worked so far. The navbar elements have no CSS applied to them no matter what I try.
Appreciate any guidance!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<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=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<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=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
rel="stylesheet"
/>
</head>
<body>
<header>
<nav id='navbar'>
<ul class=""nav-links'>
<li><a href="#welcome-section" class="nav-link">Welcome</a></li>
<li><a href="#projects" class="nav-link">Projects</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</nav>
</header>
*{
margin: 0;
}
body {
font-family: "Noto Serif", sans-serif;
text-align: center;
background-color: var(--neutral);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Poppins", sans-serif;
}
h1{
font-size: 60px;
}
#navbar {
display: flex;
justify-content: center;
position: fixed;
top: 0;
width: 100%;
background-color: var(--neutral);
padding: 20px 0;
font-size: 20px;
border-bottom: 1px solid var(--neutral-focus);
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links a{
text-decoration: none;
padding: 0 10px;
color: var(--base-100);
}
.nav-links a:hover {
text-decoration: underline;
}
you have mistake for class="nav-links", but you have used class=""nav-links'.This causing the CSS rules not to be applied to your navbar.