How can I centralize my brand + name with my pages?

I am using bootstrap to create my navbar but I am having a problem.
My brand img and brand img is not aligned with my pages names...
[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/lrAED.png


I would like the brand img and name Ghiro to be aligned with "Home""Products""Services""About us".


This is my HTML:



<nav class="navbar navbar-expand-lg brand-colors">
<a class="navbar-brand" href="/">
<img src="../../assets/images/ghiro-logo-no-shadow.png" width="50" height="50">
<h5 class="navbar-brand">Ghiro</h5>
</a>

<button class="navbar-toggler custom-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" routerLinkActive="active">
<a class="nav-link" routerLink="/home">Home</a>
</li>

<li class="nav-item">
<a routerLinkActive="active" class="nav-link" routerLink="/products">Products</a>
</li>

<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/services">Services</a>
</li>

<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/about-us">About us</a>
</li>

</ul>
</div>
</nav>

I am new at programming and could not fix this. If anyone can help me I appreciate. I am building this website for a friend and I am going to use as my portfolio at the end. I will post on my github and put the website live. Thank you!