Bootstrap меню гамбургера меняет положение

Question

Как предотвратить это?

Я хочу, чтобы значок гамбургера оставался справа, что я делаю не так?

https://jsfiddle.net/amtrbsk2/

<nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-lg text-nowrap">
<div class="container">
    <div class="row w-100 align-items-center">

        <div class="col col-lg-3">
            <a href="" class="navbar-brand justify-content-start">
                <h1 class="display-3" id="cont">Yrkeskock<span id="se">.SE</span></h1>
            </a>
        </div>

        <div class="col col-lg-5">
            <div class="navbar-nav">
                <div class="collapse navbar-collapse navbar1">
                    <a href="#" class="nav-item nav-link">Hem</a>
                    <a href="#" class="nav-item nav-link">Recept</a>
                    <a href="#" class="nav-item nav-link">Arbetssökande</a>
                    <a href="#" class="nav-item nav-link">Omdömen</a>
                    <a href="#" class="nav-item nav-link">Hjälpmedel</a>
                </div>
            </div>
        </div>

        <div class="col col-lg-1"></div>

        <div class="col col-lg-3">
            <div class="navbar-nav collapse navbar-collapse navbar1">
                <a href="#" class="nav-item nav-link mx-1" id="login"><i class="fas fa-user-check mr-1"></i>Logga In</a>
                <a href="#" class="nav-item nav-link mx-1"><i class="fas fa-user-plus mr-1">
            </div>
        </div>
    </div>
</div>
<button id="hamburger" class="navbar-toggler" data-toggle="collapse" data-target=".navbar1"><span class="navbar-toggler-icon"></span></button></nav>

Answer 1

Просто удалите класс контейнер из 14 line in jsfiddle.

Ваш код должен выглядеть следующим образом:

<div class="">

<div class="row w-100 align-items-center">

Вместо:

<div class="container">

<div class="row w-100 align-items-center">

container класс состоит из width:100%, который нарушает navbar flex .