nav bar jumps to an unintended spot-CodePudding

My goal is to have the navigation buttons jump to the top of each section. I've tried using position: relative; and using top: but it then changes the look of the site at the top, which I don't want. My problem right now is that it doesn't jump to the top of the section. This is because the nav bar is covering the top of each section (except for the last one). But I don't know what to do to solve this issue. I've researched this problem to the best of my ability but couldn't find a relevant post for this. I've cut down the code to what I believe is the minimum.

<div id="container">
<header id="header">
<img id="header-img" src="https://cdn.mos.cms.futurecdn.net/BQwukuZwwwXrg27B9Le2Q6.png"/>
<nav id="nav-bar">
<ul>
  <li id="nav-btn">
    <a  id="features" href="#Features">Features</a>
  </li>
  <li id="nav-btn">
    <a  id="demo" href="#Demo">Demo</a>
  </li>
  <li id="nav-btn">
    <a  id="pricing" href="#Pricing">Pricing</a>
  </li>
</ul>
</nav>
</header>


<img id="cybertruck" src="https://images.hgmsites.net/hug/tesla-cybertruck_100725713_h.jpg"/>

<section id="Features">
<h3>EXOSKELETON</h3>
<h3>ULTRA-HARD 30X COLD-ROLLED STAINLESS STEEL</h3>
<h3>TESLA ARMOR GLASS</h3>
</section>

<section id="Demo">
<iframe id="video" src="https://www.youtube.com/embed/m7atGkba-Z8" allowfullscreen></iframe>
</section> 

<section id="Pricing">
<h3>Single-Motor Cybertruck</h3>
<ul>
<li>$39,900</li>
<li>250  miles of range</li>
<li>0-60 moh in 6.5 seconds</li>
<li>top speed of 110 mph</li>
</ul> 
<h3>Dual-Motor Cybertruck</h3>
<ul>
<li>$49,900</li>
<li>300  miles of range</li>
<li>0-60 moh in 4.5 seconds</li>
<li>top speed of 120 mph</li>
</ul>
<h3>Tri-Motor Cybertruck</h3>
<ul>
<li>$69,900</li>
<li>500  miles of range</li>
<li>0-60 moh in 2.9 seconds</li>
<li>top speed of 130 mph</li>
</ul>
</section>
</div>

CSS:

header {
display: flex;
position: fixed;
top: 0px;
width: 100%;
background-color: #fcf6f5;
}

#header-img {
height: 80px;
position: relative;
left: 100px;
}

#container {
background-color: #fcf6f5;
}

nav ul {
display: flex;
}

#nav-btn {
position: relative;
left: 500px;
top: 20px;
}

#features, #demo, #pricing {
padding-right: 100px;
}

ul {
list-style-type: none;
}

CodePudding user response：

Add this to your css

#Features, #Demo, #Pricing{
    padding-top: 100px;
}

This will set the needed padding so each section can be shown correctly

I would also rename the id's of the a elements on the header to this

<ul>
  <li id="nav-btn">
    <a  id="features-link" href="#Features">Features</a>
  </li>
  <li id="nav-btn">
    <a  id="demo-link" href="#Demo">Demo</a>
  </li>
  <li id="nav-btn">
    <a  id="pricing-link" href="#Pricing">Pricing</a>
  </li>
</ul>

and do the same to the css accordingly

#features-link, #demo-link, #pricing-link{
padding-right: 100px;
}