Add div with scroll bar to div all on the same line

Question

NOTE: I'm aware the question may not make sense but i cant really word it right sorry (let me know a more suitable question)

Details: Basically im making a navbar with a horizontal scrollbar covering only part of it, this is how i've done the scrollbar so far but it breaks if i add anything else, any tips on how i could make this work or alternatives? Also Using Bulma for the container and some more stuff in the future.

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;

        }

Here's an example of what i want it to look like:

• Red is the scrollable text seen in example

Current Example: https://codepen.io/shiiiina/pen/YzYQMXy