Issues with centered logo on smaller devices - html

Question

I am having an issue with my centered logo on bootstrap navbar menu; I put the logo in the center of the navbar; it is working fine on desktop but when I resize the page to a smaller device, the logo, because of the presence of the Hamburger menu button on the right and its relatively pixels used, becomes out of center towards to the left.
How can I make sure that on devices with smaller screens the logo remains centered?
<nav class="navbar navbar-expand-xl navbar-toggleable-md navbar-light bg-white" id="nav1">
<div class="navbar-collapse collapse w-100 order-1 dual-collapse2">
<ul class="navbar-nav mx-auto">
<li class="nav-item home">
<a class="nav-link" href="#">HOME <span class="sr-only">(current)</span> </li>
<li class="nav-item"> <a class="nav-link" href="#">OUR WEDDINGS </li>
</ul>
</div>
<div class="mx-auto order-0 order-xl-2">
<a class="navbar-brand mx-auto" href="/"><img src="Imagine/00 Top Logo 2021.png" alt="Logo 2021" width="275" height="127"></a></div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<li class="nav-item"> <a class="nav-link" href="#">LEGALITIES </li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</nav>

Answer 1

Foreword
Before we go into the solution, one thing to note is that if this solution is implemented and the window is not wide enough to fit both the logo and the toggler without overlapping, they will do just that -- overlap.
Solution
1. Styles
You can do that using transform and position: absolute:
.navbar-brand {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
/* to place the toggler above the logo, in case they overlap */
.navbar-toggler: {
z-index: 10;
}
2. HTML
There are also some issues in the HTML. The big one is missing closing tags for <a class="nav-link">. See this jsfiddle version and check the HTML textarea for where the linter highlights issues. Also, the sr-only class is for screen readers so you want to include it for each link and make sure the text content matches the link itself -- see this answer for a great explanation of that.
Here's a refactored version of the HTML:
<nav class="navbar navbar-expand-xl navbar-toggleable-md navbar-light bg-white" id="nav1">
<div class="navbar-collapse collapse w-100 order-1 dual-collapse2">
<ul class="navbar-nav mx-auto">
<li class="nav-item home">
<a class="nav-link" href="https://www.weddinginsicily.co.uk/">
HOME
<span class="sr-only">Home</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.weddinginsicily.co.uk/wedding_sicily_our_weddings.html">
OUR WEDDINGS
<span class="sr-only">Our Weddings</span>
</a>
</li>
</ul>
</div>
<div class="mx-auto order-0 order-xl-2 navbar-brand-container">
<a class="navbar-brand mx-auto" href="/">
<img src="Imagine/00 Top Logo 2021.png" alt="Logo 2021" width="275" height="127">
</a>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="https://www.weddinginsicily.co.uk/wedding_sicily_legalities.html">
LEGALITIES
<span class="sr-only">Legalities</span>
</a>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
3. Demo
See this jsfiddle demo for the complete working solution.
Hope that helps!

Answer 2

Add position: absolute in .navbar-toggler. See if it helps you:
https://jsfiddle.net/omk9pg58/