用滚动条添加div以在同一行上划分

Question

注意：我知道这个问题可能没有意义，但我真的不能说对不起（让我知道一个更合适的问题）

详细信息：基本上我是用水平滚动栏覆盖的一部分的纳维尔，这就是我的方式到目前为止，完成了滚动条，但是如果我添加其他任何内容，那就打破了有关如何制作此工作或替代方案的任何提示？还将Bulma用于容器以及将来的更多内容。

html：

<div class="container is-max-widescreen">

        <div class="outer">
            <div style="padding-left: 10px; padding-right: 10px;">
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>
                <a href="#" class="scrollitem">ITEM</a>

            </div>
        </div>


    </div>

CSS

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

        /* Menu Scroll Bar */

        .outer::-webkit-scrollbar {
            height: 8px;
            padding-left: 20px;
            padding-right: 20px;
        }

        .outer::-webkit-scrollbar-track {
            border-radius: 10px;
        }

        .outer::-webkit-scrollbar-thumb {
            background: rgb(99, 99, 99);
            border-radius: 10px;
        }

        .outer::-webkit-scrollbar-thumb:hover {
            background: rgb(120, 120, 120);
        }

        .scrollitem {
            background-color: #222831;
            border-radius: 16px;
            text-align: center;
            display: inline-block;
            padding: 1px 13px 1px 13px;
            color: #848484;
            font-family: 'Poppins', sans-serif;
        }

        .scrollitem:hover {
            background-color: #393e46;
            color: #eeeeee;
        }

        .outer {
            background-color: #333;
            overflow-y: hidden;
            white-space: nowrap;
            padding-top: 10px;
            padding-bottom: 10px;

        }

这是我想要的外观的一个示例：

• 红色是示例中可滚动的文本

当前示例： https://codepen.io/shiiiina/pen/pen/yzyqmxy