Bootstrap Logoyu Menüler Arası Ortalama

Merhaba, bootstrap'a yeni yeni başlıyorum. Logoyu menü elemanları arasında ortalamak istiyorum. Bana yön gösterebilirseniz memnun olurum.

Menüyü justify-content-center yapsamda ortalanmadı bir türlü. https://prnt.sc/smiorb

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Anasayfa</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Kurumsal
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Hakkımızda</a>
                        <a class="dropdown-item" href="#">Sertifikalarımız</a>
                        <a class="dropdown-item" href="#">Ekibimiz</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Hizmetler
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Chip Tuning Ekonomik</a>
                        <a class="dropdown-item" href="#">Chip Tuning Performans</a>
                        <a class="dropdown-item" href="#">DTC Deaktivasyonu</a>
                        <a class="dropdown-item" href="#">EGR Deaktivasyonu</a>
                        <a class="dropdown-item" href="#">DPC Deaktivasyonu</a>
                        <a class="dropdown-item" href="#">AdBlue Deaktivasyonu</a>
                        <a class="dropdown-item" href="#">Gizli Özellik</a>
                    </div>
                </li>
                <ul class="nav navbar-nav navbar-logo mx-auto">
                    <li class="nav-item">
                      <a class="nav-link" href="#">LOGO</a>
                    </li>
                </ul>
                <li class="nav-item">
                    <a class="nav-link" href="#">SSS</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Bayilik
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Bayilik Başvurusu</a>
                        <a class="dropdown-item" href="#">Bayilik Şartları</a>
                        <a class="dropdown-item" href="#">Bayilerimiz</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Referanslar</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">İletişim</a>
                </li>
            </ul>
        </div>
    </nav>

mx-auto kodu ekli mi?, logoya margin left ve margin right auto vermelisin. Ayrıca logoya width de vermelisin marginlerin çalışması için.

Menüm bu hali aldı ancak ufak bir sorunum var üstat mobil görünümde logo menü içerisinde görünüyor.



nerede hata yapmış olabilirim?

 <section id="cover">
        <nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Anasayfa</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Kurumsal
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Hakkımızda</a>
                            <a class="dropdown-item" href="#">Sertifikalarımız</a>
                            <a class="dropdown-item" href="#">Ekibimiz</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Hizmetler
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Chip Tuning Ekonomik</a>
                            <a class="dropdown-item" href="#">Chip Tuning Performans</a>
                            <a class="dropdown-item" href="#">DTC Deaktivasyonu</a>
                            <a class="dropdown-item" href="#">EGR Deaktivasyonu</a>
                            <a class="dropdown-item" href="#">DPC Deaktivasyonu</a>
                            <a class="dropdown-item" href="#">AdBlue Deaktivasyonu</a>
                            <a class="dropdown-item" href="#">Gizli Özellik</a>
                        </div>
                    </li>
                    <ul class="nav navbar-nav navbar-logo mx-auto">
                        <li class="nav-item">
                        <a class="nav-link" href="#">LOGO</a>
                        </li>
                    </ul>
                    <li class="nav-item">
                        <a class="nav-link" href="#">SSS</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Bayilik
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Bayilik Başvurusu</a>
                            <a class="dropdown-item" href="#">Bayilik Şartları</a>
                            <a class="dropdown-item" href="#">Bayilerimiz</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Referanslar</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">İletişim</a>
                    </li>
                </ul>
            </div>
        </nav>
    </section>

html,
body,
#cover {
    height: 100%;
}

#cover {
    background: url('../spd_img/porsche.gif') no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.navbar-custom {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: black;
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

a.nav-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 10px;
    transition: color 0.5s ease;
    -webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -o-transition: color 0.5s ease;
}

Masaüstünde görünen logoyu mobilde display:none; edeceksin. Bir tane daha logo divi aç, o divi masaüstünde display:none; yap mobilde de açılması için display:block; yap. Umarım anlatabilmişimdir

Tam istediğim menü görünümünü elde ettim. (Elemanların dizilimi açısından) Şimdi dediğiniz şeyi uygulamaya çalışacağım üstat.





Üstatlar selamın aleyküm yine rahatsız ediyorum kusura bakmayın. Meanmenu kullandım mx-auto özelliği ile ortalama yaptım ve 2 ul oluşturup brand'i ortaya koydum. Sonuç böyle mobil sonuçta gayet iyi desktop ile mobile logolar farklı kullanabiliyorum artık.



Ama halen bu arka planda dikdörtgen meselesini çözemedim logoya. (İlk mesajımdaki örnekteki gibi.)