添加position fixed后Navbar在大屏（>2050px）出现溢出问题求助

我正在开发一个基于HTML、CSS和JavaScript的项目，为导航栏添加position: fixed属性后，在屏幕宽度大于2050px的情况下出现内容溢出的问题，尝试解决但未成功，恳请知晓解决方案的开发者告知。

• 溢出问题截图：导航栏内容在超宽屏幕下出现横向溢出
• 项目样式文件：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">&#9776;</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>

内容的提问来源于stack exchange，提问作者Samalka Hansana