Растягивание полей элементов панели навигации на полную ширину браузера

Question

Я разрабатываю адаптивный сайт с помощью начальной загрузки. Я пытаюсь сделать так, чтобы поля содержимого (или) nav-item растягивались на всю ширину браузера.

Я пробовал это, оборачивая элементы nav с помощью класса container-liquid, устанавливая ширину на 100%, все еще не мог получить желаемый результат

<div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a href="#" class="nav-link alert alert-success">Chicken</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link alert alert-danger">Beef</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link alert alert-warning">Sushi</a>
        </li>
    </ul>
</div>

вывод должен быть таким, чтобы все цветные поля nav-элемента растягивались на полную ширину браузера, то есть когда браузер сжимается до размера -xs, в правом верхнем углу появляется кнопка переключения, когда при щелчке появится раскрывающееся меню, внутри цветных блоков эти цветные поля должны быть растянуты на всю ширину браузера.

вот ссылка jsfiddle: https://jsfiddle.net/ejzrmvxq/