Появился нижний скролл и шапка меню начинает ездить при вертикальном скролле

const iconMenu = document.querySelector('.fa-bars');
if (iconMenu) {
    const menuNavigation = document.querySelector('.navigation');
    iconMenu.addEventListener('click', (event) => {
        document.body.classList.toggle('_lock')
        menuNavigation.classList.toggle('_active');
    });
}

* {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
}

.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;

  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

a {
    text-decoration: none;
}

.container {
    width: 100%;
    position: relative;
    max-width: 1024px;
    margin: 0 auto;
}

.wrapper {
    display: flex;
}

.header {
    background-color: #373c3f;
    display: flex;
    align-items: center;
}

.header__title {
    display: none;
}

.header .fas {
    display: none;
}

.navigation__list {
    display: flex;
    list-style-type: none;
    margin-left: 54px;
    padding: 0;
    margin-top: 40px;
    margin-bottom: 40px;
}

.navigation__item {
    margin-right: 30px;
}

.navigation__item a {
    text-transform: uppercase;
    font-size: 15px;
    color: #ffffff;
    transition: 0.3s all;
}

.navigation__item a:hover {
    color: #a5a5a5;
}

.info {
    background: linear-gradient(to bottom right, #19b4c6, #0ca3b9);
    height: 389px;
    padding-top: 189px;
}

.info__title {
    width: 730px;
    font-size: 60px;
    color: #ffffff;
    margin-bottom: 40px;
    margin-left: 83px;
    font-weight: 500;
}

.info__link {
    font-size: 34px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 83px;
    padding-right: 315px;
}

.info .fas {
    font-size: 30px;
    color: #ffffff;
    text-decoration: none;
}

.descr {
    background-color: #27212c;
}

.descr__file {
    width: 796px;
    height: 244px;
    background-color: #27212c;
    display: flex;
    justify-content: center;
    align-items: center;
}

.descr__text {
    color: #9282a0;
    font-size: 30px;
    font-weight: 500;
}

.descr__arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 228px;
    height: 244px;
    background-color: #bc3183;
}

.descr .fas {
    font-size: 37px;
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s all;
}

.descr .fas:hover {
    color: #d65aa2;
}

.card {
    background-color: #5b0fa1;
}

.card__first {
    width: 341px;
    height: 295px;
    background-color: #5b0fa1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: solid 1px #470e7c;
}

.card .fas {
    font-size: 37px;
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s all;
}

.card .fas:hover {
    color: #774d9e;
}

.card__second {
    height: 295px;
}

.img__second {
    width: 341px;
    height: 295px;
    vertical-align: bottom;
    transition: 0.3s all;
}

.img__second:hover {
    filter: brightness(40%)
}

.card__third {
    height: 295px;
}

.img__third {
    width: 341px;
    height: 295px;
    vertical-align: bottom;
    transition: 0.3s all;
}

.img__third:hover {
    filter: brightness(40%)
}

.about {
    min-height: 510px;
    background-color: #ebebeb;
    padding-top: 48px;
}

.about__title a{
    display: block;
    color: #088ca5;
    font-size: 30px;
    margin-bottom: 15px;
    margin-left: 76px;
}

.about .wrapper {
    justify-content: space-evenly;
}

.about__text {
    color: #515151;
    width: 396px;
    font-size: 13px;
    line-height: 27px;
}

.about__text span{
    display: inline-block;
    margin-top: 30px;
}

@media (max-width: 1024px) {
    .info {
        background: linear-gradient(to bottom right, #19b4c6, #0ca3b9);
        height: 360px;
        padding-top: 189px;
    }
}

@media (max-width: 980px) {
    body._lock {
        overflow: hidden;
    }

    .header {
        width: 100%;
        position: fixed;
        z-index: 10;
        overflow: hidden;
    }

    .header__title {
        display: block;
        margin-top: 23px;
        margin-left: 38px;
        margin-bottom: 20px;
        font-size: 24px;
        font-weight: 500;
        color: #ffffff;
    }

    .fas__bg {
        position: absolute;
        right: 0;
        background-color: #202529;
        width: 82px;
        height: 72px;
    }

    .header .fas {
        display: block;
        font-size: 28px;
        right: 29px;
        position: absolute;
        color: #ffffff;
        z-index: 5;
    }

    .navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(39, 39, 39, 0.863);
        transition: all 0.3s ease 0s;
        transform: translate(-100%, 0px);
    }

    .navigation._active {
        transform: translate(0px, 0px);
    }

    .navigation__list {
        position: absolute;
        top: 48px;
        left: -16px;
        flex-direction: column;
    }

    .navigation__item a {
        display: inline-block;
        margin-right: 0;
        font-size: 25px;
        margin-bottom: 10px;
    }

    .info {
        height: 250px;
        padding-top: 201px;
    }

    .info__title {
        width: 455px;
        font-size: 39px;
        margin-bottom: 23px;
    }

    .info__link {
        font-size: 26px;
        padding-right: 161px;
    }

    .info .fas {
        font-size: 20px;
    }

    .descr__text {
        font-size: 19px;
    }

    .descr__file {
        height: 153px;
    }

    .descr__arrow {
        height: 153px;
    }

    .card {
        background-color: #0ca2b8;
    }

    .card .wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .card__first {
        border: none;
    }

    .img__second {
        max-width: 640px;
    }

    .about__text {
        font-size: 22px;
        line-height: 41px;
    }

    .about__text--right {
        display: none;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <script src="https://kit.fontawesome.com/2662e86b78.js" crossorigin="anonymous"></script>
</head>
<body>
    <header class="header">
        <h1 class="header__title">Navigation</h1>
        <div class="fas__bg"></div>
        <i class="fas fa-bars" id="burger"></i>
        <nav class="navigation">
                <ul class="navigation__list">
                    <li class="navigation__item"><a href="#">PSD WEBSITES</a></li>
                    <li class="navigation__item"><a href="#">UI KITS</a></li>
                    <li class="navigation__item"><a href="#">PREMIUM PSD FILES</a></li>
                    <li class="navigation__item"><a href="#">ABOUT</a></li>
                    <li class="navigation__item"><a href="#">BLOG</a></li> 
                    </ul>
            </div>
        </nav>
    </header>
   
    <section class="info">
        <div class="container">
            <h2 class="info__title">Awesome Free PSD templates & Resources</h2>
            <a class="info__link" href="#">www.BlazRobar.com</a>
            <a href="#" class="fas fa-chevron-right"></a>
        </div>
    </section>

    <section class="descr">
        <div class="container">
            <div class="wrapper">
                <div class="descr__file">
                    <h2 class="descr__text">I'm like the Robin Hood of PSD files.</h2>
                </div>
                <div class="descr__arrow">
                    <a href="#" class="fas fa-chevron-right"></a>
                </div>
            </div>
        </div>
    </section>

    <section class="card">
        <div class="container">
            <h2 class="visually-hidden">Главное меню</h2>
            <div class="wrapper">
                <div class="card__first">
                    <a href="#" class="fas fa-chevron-right"></a>
                </div>
                <div class="card__second">
                    <a href="#"><img src="img/bridge.jpg" alt="bridge" class="img__second"></a>
                </div>
                <div class="card__third">
                    <a href="#"><img src="img/girl.jpg" alt="girl" class="img__third"></a>
                </div>
            </div>
        </div>
    </section>

    <section class="about">
        <div class="container">
            <h2 class="about__title"><a href="#">BlazRobar.com</a></h2>
            <div class="wrapper">
                <p class="about__text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula ipsum non leo tristique eget facilisis lacus commodo. Curabitur vitae justo lorem, non ornare nibh. Pellentesque pretium, tellus ac ultrices faucibus, nibh mauris dapibus lorem, vitae viverra nisl elit sit amet libero. Nam eu blandit risus. 
                    <span>Phasellus imperdiet mattis nulla. Integer gravida imperdiet congue. Proin vitae pretium augue. Donec est sem, mattis et blandit ac, blandit at arcu. Donec tempus tincidunt suscipit. Suspendisse eu vulputate lacus.</span>
                </p>
        
                <p class="about__text about__text--right">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula ipsum non leo tristique eget facilisis lacus commodo. Curabitur vitae justo lorem, non ornare nibh. Pellentesque pretium, tellus ac ultrices faucibus, nibh mauris dapibus lorem, vitae viverra nisl elit sit amet libero. Nam eu blandit risus. 
                    <span>Phasellus imperdiet mattis nulla. Integer gravida imperdiet congue. Proin vitae pretium augue. Donec est sem, mattis et blandit ac, blandit at arcu. Donec tempus tincidunt suscipit. Suspendisse eu vulputate lacus.</span>
                </p>
            </div>
        </div>
    </section>

    <script src="js/script.js"></script>
</body>
</html>