Making bootstrap5 scrip logo appear in the centre on mobile - mobile

Question

I have coded a very basic blog script it's nothing elaborate but does the job (built-in bootstrap 5 & PHP), everything is working as it should in desktop and mobile view, the only small thing I'm not sure about is, when I view the site in mobile view the image (logo) appears to the left-hand side (while in mobile view), I think it would look better in the centre.
Image of what I see:
The script is located at: https://www.the-golfer-guys.com/
It's not a big deal, but I'm not sure the best way to make it appear in the centre (while only in mobile view).
my navbar code:
<nav class="navbar navbar-expand-lg border-bottom navbar-white bg-white padding-bottom" id="mainNav">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<i class="fas fa-bars"></i>
</button>
<!-- mobile -->
<div class="collapse navbar-collapse w-100 justify-content-center" id="collapsibleNavbar">
<a class="navbar-brand" href="<?= urlFull(); ?>"><img src="<?= urlFull(); ?><?= getHeaderImage(); ?>" alt="<?= urlFull(); ?>"></a>
<ul class="nav nav-pills nav-fill ms-auto">
<li class="nav-item">Home</li>
<?php $pages = DB::getInstance()->select("SELECT * FROM `pages`"); ?>
<?php foreach($pages as $page) { ?>
<li class="nav-item"><?= $page['page_name']; ?></li>
<?php } ?>
<li class="nav-item">Contact</li>
</ul>
<ul class="nav navbar-nav ms-auto" style="padding-top: 10px;">
<li>
<form class="d-flex" action="<?= urlFull(); ?>search.php" method="get">
<input class="form-control me-2" type="search" name="s" placeholder="Search ..." aria-label="Search" required>
<button type="submit" class="btn btn-success"><i class="fas fa-search"></i></button>
</form>
</li>
</ul>
</div>
</div>
</nav>
Any advice or help would be appreciated, it's more my design OCD than anything.