I am relatively new to working with html/css/bootstrap 4 and currently in the process of designing a navbar. Essentially, I aim to have a YouTube logo on the left that links to a YouTube channel, a Spotify logo on the right that directs to a Spotify creator, and in the middle the name of the creator. The name should be centered within the viewport as it is essential for proper alignment when creating headlines. However, I am facing an issue where the name of the creator appears slightly off-center (to the right). How can I resolve this and ensure proper centering?
Here is a snippet of my current code:
<nav class="navbar navbar-light bg-black">
<a class="nav-link" style="color:white" href="https://www.youtube.com/channel/UC_OvfkWfYRvdkazcOoeJd8Q"><img src="img/yt-logo-dark.png" alt="YouTube" height="25px"></a>
<ul class="nav justify-content-center">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="color:white"><h2>KJK Music</h2></a>
<div class="dropdown-menu">
<a class="dropdown-item disabled" href="about-me">About Me</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="about-site">About Site</a>
</div>
</li>
</ul>
<a class="navbar-link" style="color: white" href="https://open.spotify.com/artist/7vlBedEBJhQlJCl1tpknhi"><img src="img/SpotifyIcon.png" alt="Spotify" height="50px" style="margin:12.5px"></a>
</nav>(I had to present it as a snippet to maintain clarity in formatting)