Центрирование подменю bootstrap
Мне надо подменю отцентрировать в аккурат между ORANGE буквой а в логотипе и иконкой Пользователя
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu {
display: none;
}
.navbar .nav-item:hover .nav-link {}
.navbar .nav-item:hover .dropdown-menu {
display: block;
}
.navbar .nav-item .dropdown-menu {
margin-top: 0;
}
}
/* ============ desktop view .end// ============ */
body {
background: #060707;
}
.navbar-brand {
color: #F5702C;
}
.navbar-brand:hover {
color: #F5702C;
}
.nav-link {
color: #999999;
}
.nav-link:hover {
color: #fff;
}
.nav-link:focus {
color: #fff;
}
.wood {
color: #999999;
}
.bi-search,
.bi-person,
.bi-cart3,
.bi-playstation {
fill: #F5702C;
}
.bi-phone {
fill: #999999;
}
.phone {
color: #999999;
}
.dropdown-item img {
width: 150px;
height: 150px;
}
.dropdown-menu {
margin-right: -1000px;
}
.dropdown-menu>li {
display: inline-block;
align-items: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link rel="stylesheet" href="asset/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="asset/css/normalize.css">
<link rel="stylesheet" href="asset/css/style.css">
</head>
<body>
<header>
<div class="header-top">
<div class="container fixed-top">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-playstation" viewBox="0 0 16 16">
<path d="M15.858 11.451c-.313.395-1.079.676-1.079.676l-5.696 2.046v-1.509l4.192-1.493c.476-.17.549-.412.162-.538-.386-.127-1.085-.09-1.56.08l-2.794.984v-1.566l.161-.054s.807-.286 1.942-.412c1.135-.125 2.525.017 3.616.43 1.23.39 1.368.962 1.056 1.356ZM9.625 8.883v-3.86c0-.453-.083-.87-.508-.988-.326-.105-.528.198-.528.65v9.664l-2.606-.827V2c1.108.206 2.722.692 3.59.985 2.207.757 2.955 1.7 2.955 3.825 0 2.071-1.278 2.856-2.903 2.072Zm-8.424 3.625C-.061 12.15-.271 11.41.304 10.984c.532-.394 1.436-.69 1.436-.69l3.737-1.33v1.515l-2.69.963c-.474.17-.547.411-.161.538.386.126 1.085.09 1.56-.08l1.29-.469v1.356l-.257.043a8.454 8.454 0 0 1-4.018-.323Z" class="bi-playstation"/>
</svg> ORANGE
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Переключатель навигации">
<span class="navbar-toggler-icon"></span>
</button>
<div class="wood">Разработано в Германии. Сделанов в России.</div>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 hide">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">О компании</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">О продукции</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Каталог товаров
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/1.png"><span>Смесители</span></a>
</li>
<li>
<a class="dropdown-item" href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/1.png"><span>Мебель</span></a>
</li>
<li>
<a class="dropdown-item" href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/1.png"><span>Душевая программа</span></a>
</li>
<li>
<a class="dropdown-item" href="#"><img src="https://bootstraptema.ru/snippets/icons/2016/mia/1.png"><span>Фаянс</span></a>
</li>
</ul>
</li>
</ul>
<div class="col d-flex justify-content-end">
<ul class="nav ">
<li class="nav-item">
<a class="nav-link phone" href="tel:+78005108080">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16">
<path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
<path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" class="bi-phone"/>
</svg> +7 (800) 510-80-80</a>
</li>
<li class="nav-item hide">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart3" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" class="bi-cart3"/>
</svg>
</a>
</li>
<li class="nav-item hide">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" class="bi-person"/>
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" class="bi-search"/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</header>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<section class="rororo mt-5">
<h5>One section</h5>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<section class="rororo mt-2">
<h5>Two section</h5>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<section class="rororo mt-2">
<h5>Three section</h5>
</section>
<script src="asset/js/bootstrap.bundle.js"></script>
<script src="asset/js/jquery-3.7.1.js"></script>
<script src="asset/js/main.js"></script>
</body>
</html>