I’m doing the “Product Landing Page” project. Its working fine, but when the page is loaded the navigation bar has a margin, when I click on a link from the navbar it goes up by itself! Can someone help please? Im lost. Thanks for reading =).
HTML:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Phudu:wght@500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Play&display=swap" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="./styles.css" />
<title>Product Landing Page</title>
</head>
<body>
<div class="fixed-nav">
<div id="header">
<img
src="./images/freecodecamp_logo.png"
alt="freeCodeCamp logo"
id="header-img"
/>
<nav id="nav-bar">
<a class="nav-link" href="#about">About</a>
<a class="nav-link" href="#how-it-works">How it Works</a>
<a class="nav-link" href="#courses">Courses</a>
</nav>
</div>
<main>
<!--<form id="form">
<label for="#email">Enter your email:</label>
<input type="email" name="#email" id="email"></input>
</form> -->
<section class="sections" id="about">
<header class="section-header">About freeCodeCamp</header>
<p class="section-text">
freeCodeCamp (also referred to as Free Code Camp) is a non-profit
organization that consists of an interactive learning web platform,
an online community forum, chat rooms, online publications and local organizations
that intend to make learning software development accessible to anyone. Beginning
with tutorials that introduce students to HTML, CSS and JavaScript, students
progress to project assignments that they complete either alone or in pairs. Upon
completion of all project tasks, students are partnered with other nonprofits to
build web applications, giving the students practical development experience.
</p>
</section>
<section class="sections" id="how-it-works">
<header class="section-header">How it Works</header>
<div id="how-it-works-container">
<div class="how-div" id="how1">
<img
src="./images/talvez1talvez.png"
id="how-icon1"
/>
<h1>Study with Active Tasks</h1>
<p>Read a short introduction and then do an exercise on what was read</p>
</div>
<div class="how-div" id="how2">
<img
src="./images/talvez2talvezmt.png"
id="how-icon2"
/>
<h1>Build Projects</h1>
<p>Make projects using what you've learned from the exercises throughout the course</p>
</div>
<div class="how-div" id="how3">
<img
src="./images/talvez3.png"
id="how-icon3"
/>
<h1>Earn a Certificate</h1>
<p>If you complete your project and it meets the requirements, earn a course completion certificate</p>
</div>
</div>
</section>
<section class="courses" id="courses">
<header class="section-header">Courses</header>
<div class="courses-container">
<iframe
width="560" height="315"
src="https://www.youtube.com/embed/zOjov-2OZ0E?si=ind7GBAEU136xN6_"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
<ul id="courses-list">
<li><a
href="https://www.freecodecamp.org/learn/2022/responsive-web-design/"
target="_blank"
>Responsive Web Design
</a><span class="right-arrow">➜</span>
</li>
<li><a
href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/"
target="_blank"
>JavaScript Algorithms and Data Structures
</a><span class="right-arrow">➜</span>
</li>
<li><a
href="https://www.freecodecamp.org/learn/front-end-development-libraries/"
<target="_blank"
>Front End Development Libraries</a><span class="right-arrow">➜</span></li>
<li><a
href="https://www.freecodecamp.org/learn/"
target="_blank"
>Explore all courses</a><span class="right-arrow">➜</span>
</li>
</ul>
</div>
</section>
</main>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background-color: #0a0a23;
color: white;
}
.fixed-nav {
overflow: hidden;
height: 100vh;
}
#header-img {
margin-right: auto;
}
#nav-bar {
margin: auto 0;
}
.nav-link {
margin: auto 1.5rem;
}
#header {
height: 20%;
display: flex;
flex-direction: row;
justify-content: flex-end;
background-color: #0a0a22;
font-size: 2.5rem;
font-family: Kanit, sans-serif;
}
main {
margin-top: -30px;
overflow-y: auto;
height: 90%;
font-size: 1.8rem;
text-align: center;
padding-bottom: 40px;
}
.section-header {
margin: 1.5rem;
font-size: 4rem;
font-family: Phudu, serif;
}
.section-text {
font-size: 2rem;
padding: 10px;
text-align: justify;
font-family: Montserrat, sans-serif;
letter-spacing: 2px;
}
#how-it-works {
margin-top: 5%;
}
#how-it-works-container {
display: flex;
flex-direction: row;
justify-content: center;
}
.how-div {
border: 5px solid black;
width: 300px;
height: 300px;
background-color: #F0E68C;
color: black;
}
.how-div img {
width: 100px;
height: 100px;
margin-right: 200px;
margin-top: 3px;
}
#how-icon2, #how-icon3 {
margin-top: 10px;
}
#how-icon2 {
margin-right: 160px;
}
#how1 h1 {
margin-top: 10px;
}
.how-div p {
margin-top: 10px;
padding: 10px;
}
#courses-list li {
color: black;
background-color: white;
margin: 20px;
list-style: none;
border: 3px solid white;
text-align: left;
font-size: 2rem;
font-family: Play, sans-sefi;
}
#courses {
margin-top: 5rem;
}
#courses iframe {
padding: 10px;
background-color: white;
}
.right-arrow {
float: right;
}
/*#form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#form #email {
margin-top: 10px;
width: 15%
}*/