Top header overlaps div contents

I am using AdminLTE3 (bootstrap) template. I have a header with around 15 divs. This header looks good until there are just 10 divs and then it starts to overlap other content on the page. Please look at the screenshot.

How can I accommodate everything nicely on the header, do I need to have scrollbar ?

My HTML code is as below :

<div id="control-header-section">
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
        <div class="navbar-nav mx-3">
            <ul class=" ml-auto small list-unstyled">
                <li class="nav-item"><label class="label label-monitoring">Monitoring</label></li>
                <li class="nav-item"><a class="btn bg-purple btn-sm" role="button">Access Local Site</a></li>
            </ul>
        </div>
</div>