I am working on a project with html, css and javascript. But I have a problem with the navbar as it is overflowing the content in the screens bigger than 2050px. I have tried to solve it but it seems like hard. If someone knows the answer please let me know. It is happening when I add position fixed to my navbar.
Here is the screenshot of my overflow
Styles for my project can be found by styles.css
index.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Goedkoper dan pin en veiliger dan cash. Verbreed jouw klantenkring met Bitcoin. Bekijk de demo">
<title>Bitcoin voor winkeliers, horeca en ondernemers - Ontdek de voordelen</title>
<link rel="icon" type="image/x-icon" href="images/bitcoin-logo.svg">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="main">
<div data-include-html="header.html"></div>
<div class="background-image">
<img src="images/voorbeeld-bitcoin-lightning-betaling-480.webp"
srcset="images/voorbeeld-bitcoin-lightning-betaling-320.webp 320w,
images/voorbeeld-bitcoin-lightning-betaling-480.webp 480w,
images/voorbeeld-bitcoin-lightning-betaling-600.webp 600w,
images/voorbeeld-bitcoin-lightning-betaling-768.webp 768w,
images/voorbeeld-bitcoin-lightning-betaling-1024.webp 1024w,
images/voorbeeld-bitcoin-lightning-betaling-1280.webp 1280w,
images/voorbeeld-bitcoin-lightning-betaling-1600.webp 1600w"
sizes="(max-width: 320px) 320px,
(max-width: 480px) 480px,
(max-width: 600px) 600px,
(max-width: 768px) 768px,
(max-width: 1024px) 1024px,
(max-width: 1280px) 1280px,
1600px"
alt="Voorbeeld van een Bitcoin Lightning betaling in een winkel">
</div>
<div class="paragraph">
<div>
<h1>Voordelen van Bitcoin ontvangen</h1>
</div>
<div>
<div>
<button class="button"><span>Demo</span></button>
</div>
</div>
</div>
<div data-include-html="footer.html"></div>
<script src="script.js"></script>
</div>
</body>
</html>
Header.html
<nav>
<div class="sidebar">
<span onclick=hideSidebar() class="close"><a href="#"><svg
xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></a></span>
<div class="rest-menu">
<span><a href="index.html" aria-label="Home">Home</a></span>
<span><a href="#" aria-label="Demo">Demo</a></span>
<span><a href="vraag-en-antwoord.html" aria-label="Vraag & antwoord">Vraag & antwoord</a></span>
<span><a href="#" aria-label="Praktijk cases">Praktijk cases</a></span>
<span><a href="#" aria-label="Starten">Starten</a></span>
<span><a href="#" aria-label="Contact">Contact</a></span>
</div>
</div>
<div class="flex">
<div>
<a href="index.html" aria-label="Logo" class="logo">
<img src="images/bitcoin-logo.svg" alt="Navigation Bar" height="50" width="50" srcset="images/bitcoin-logo.svg 50w, images/bitcoin-logo.svg 100w" sizes="(max-width: 600px) 50px, 100px">
<span class="logotext">bitcoin</span>
</a>
</div>
<div class="desk">
<span><a href="index.html" class="hideOnMobile" aria-label="Home">Home</a></span>
<span><a href="#" class="hideOnMobile" aria-label="Demo">Demo</a></span>
<span><a href="vraag-en-antwoord.html" class="hideOnMobile" aria-label="Vraag & Antwoord">Vraag & antwoord</a></span>
<span><a href="#" class="hideOnMobile" aria-label="Praktijk cases">Praktijk cases</a></span>
<span><a href="#" class="hideOnMobile" aria-label="Starten">Starten</a></span>
<span><a href="#" class="hideOnMobile" aria-label="Contact">Contact</a></span>
<span class="menu-button">☰</span>
</div>
</div>
Footer.html
<footer>
<div class="top">
<ul class="text">
<li><a href="index.html" aria-label="Footer Home"
class="Home">Home</a></li>
<li><a href="#" aria-label="Footer Demo">Demo</a></li>
<li><a href="vraag-en-antwoord.html" aria-label="Vraag &
antwoord">Vraag & antwoord</a></li>
<li><a href="#" aria-label="Footer Praktijk Cases">Praktijk
cases</a></li>
<li><a href="#" aria-label="Footer Starten">Starten</a>
</li>
<li><a href="#" aria-label="Footer Contact">Contact</a>
</li>
</ul>
</div>
<div class="footer-bottom">
<p>© 2024 CC0 / Public Domain. ontvangbitcoin.nl is met ❤️
gemaakt door enthousiaste Bitcoin community bijdragers. <a
href="https://gitlab.com/orangepill.nl/ontvangbitcoin.nl"
class="copyright">Fork @ Gitlab.</a></p>
</div>
</footer>