如何从我的导航栏中删除水平滚动条

Question

我正在尝试制作一个响应式网站，其中当宽度减小时，我的导航链接就看不见了，但是有一个 ***水平滚动条***，我想摆脱它。我为此查看了其他问题，但其中 none 帮助了我。
有什么建议么？
预先感谢
HTML

    <header class="head">
        <nav class="navbar">

            <div class="logo">
                <a href="index.html">Krishang Sharma</a>
            </div>

            <ul class="nav-items">
                <li><a href="#">Work</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <div class="crossMenu">
                <div class="line1"></div>
                <div class="line2"></div>
            </div>

            <!-- Theme Toggle Switch -->
            <div class="switch">
                <div class="bg">
                    <div class="circle"></div>
                </div>
            </div>


        </nav>
    </header>

CSS

.navbar{
    width: 100vw;
    height: 10vh;
    display: flex;
    align-items: center;
    font-family: 'Poppins', serif;
    justify-content: space-evenly;
    box-shadow: 0px 15px 20px #1e1e1e;
}

.logo{
    width: 40%;
}

.logo a{
    color: white;
    transition: 0.3s;
    font-size: 1.5rem;
    text-decoration: none;
}

.logo a:hover{
    transition: 0.3s;
    color: #639FAB;
}

.nav-items{
    width: 40%;
    display: flex;   
    justify-content: space-around;
}

.nav-items, li a{
    align-items: center;
    height: 100%;
    font-size: 18px;
    color: white;
    list-style: none;
    transition: 0.3s;
    text-decoration: none;
}

.nav-items a:hover{
    transition: 0.3s;
    color: #639FAB;
}

.crossMenu{
    cursor: pointer;
    display: none;
    margin-right: 2%;
}

.line1, .line2{
    margin: 4px;
    height: 4px;
    width: 35px;
    transition: 0.5s ease;
    border-radius: 25px;
    background: #639FAB;
}

.switch{
    cursor: pointer;
    align-items: center;
}

.bg{
    height: 20px;
    width: 60px;
    background: white;
    border-radius: 10px;
    transition: 0.5s ease;
}

.circle{
    right: 5px;
    top: -5px;
    width: 30px;
    height: 30px;
    position: relative;
    border-radius: 50%;
    transition: 0.5s ease;
    background: #639FAB;
}

.circleOn{
    background: white;
    right: -35px;
    transition: 0.5s ease;
}

.bgOn{
    transition: 0.5s ease;
    background: #639FAB;
}

低分辨率

    .nav-items{
        right: 15%;
        position: absolute;
        transition: 0.5s ease;
        transform: translateX(200%);
    }

Answer 1

将 overflow-x: hidden; 添加到导航栏的 style= 属性。

Answer 2

为什么您在 .nav-items 元素上使用了 transform: translateX(200%);？您应该 remove/add transform: translateX(0); on .nav-items 这个元素。那么Horizontal Scroll Bar就不会显示了

如何从我的导航栏中删除水平滚动条

How do I remove the horizontal scroll bar from my Navbar

html

css

frontend

web-frontend