Why is position: fixed creating whitespace when I use it? - html

Question

So I have been busy with a navbar and I want to make it fixed but whenever I use position: fixed, the navbar does stay fixed but it creates whitespace and pushes everything down (the parent container and it's sister elements).
So what could be causing this and how do I solve this issue?
Thanks in advance for your help.
Screenshot of how it looks with the issue
The HTML
The CSS
nav {
padding: 15px;
position: fixed;
width: 100%;
z-index: 1;
top: 0;
}
.hero-section {
background-image: url(img/dylann-hendricks-Ll-A9nKuOhk-unsplash.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 0px 0px;
height: 100vh;
}
<pre>
<code>
<section class="hero-section">
<nav class="navbar">
<div class="logo">KM</div>
<div class="links-container">
<div>About</div>
<div>Skills</div>
<div>Projects</div>
</div>
</nav>
<div class="intro-container">
<div class="greeting rev-block"><span>Hi there,</span></div>
<div class="my-name rev-block" id="onemore1">
<span>I'm Khanya Mateta</span>
</div>
<div class="job-title rev-block" id="onemore2">
<span>Front End Developer</span>
</div>
<div class="contact-btn">Contact Me</div>
<div class="social-media">
<img src="img/github.png" />
<img src="img/linkedin.png" />
<img src="img/twitter.png" />
</div>
</div>
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
</section>
</code>
</pre>

Answer 1

Try using this in the css for nav element:
left: 0;
right: 0;
Adjust the left and right values while using position: fixed.
Using this I solved the same issue in my site.
Thank you 😊.