Navigation Link is taking the whole width - css

Question

I need to place an icon in my navigation. I am using mdbootstrap. If I do not put any icon, I get the navigation aligned right like so:
but when I place an image, the links are not aligned any more.
I think the reason for that when I add an image the navlink occupies the whole space like so in the inspector:
This is my code:
<mdb-navbar
SideClass="navbar navbar-expand-lg scrolling-navbar class z-depth-0"
>
<mdb-navbar-brand>
<a class="navbar-brand" [routerLink]="['']">
<img
src="../../../assets/imgs/Autosweep-Logo-portrait-hi-res-1.jpg"
height="100"
class="d-inline-block align-top"
alt=""
/>
</a>
</mdb-navbar-brand>
<links class="mt-4" style="margin-left: 50px;">
<ul class="nav justify-content-center">
<li class="nav-item size-fonts">
<a
class="nav-link waves-light"
mdbWavesEffect
[routerLink]="['subscribe-now']"
routerLinkActive="active">
<img src="../../../assets/imgs/icons/Subscribe 2.png" style="width: 7%; height: 7%;"/>
<br>
Subscribe Now
</a>
</li>
<li class="nav-item size-fonts">
<a
class="nav-link waves-light"
mdbWavesEffect
[routerLink]="['forms']"
routerLinkActive="active"
>
Forms</a
>
</li>
<li class="nav-item size-fonts">
<a
href="https:www.autosweeprfidapps.com/balanceinquiry"
class="nav-link waves-light"
mdbWavesEffect
>Balance Inquiry</a
>
</li>
<li class="nav-item size-fonts">
<a
class="nav-link waves-light"
mdbWavesEffect
[routerLink]="['reloading']"
routerLinkActive="active"
>Stations & Reloading Partners</a
>
</li>
<li class="nav-item size-fonts">
<a
class="nav-link waves-light"
mdbWavesEffect
[routerLink]="['ada-enrollment']"
routerLinkActive="active"
>ADA Re-Activation</a
>
</li>
<li class="nav-item size-fonts">
<a
class="nav-link waves-light"
mdbWavesEffect
[routerLink]="['events']"
routerLinkActive="active"
>Events</a
>
</li>
<li class="nav-item size-fonts">
<a
class="nav-link waves-light"
mdbWavesEffect
[routerLink]="['customer-care']"
routerLinkActive="active"
>Customer Care</a
>
</li>
</ul>
</links>
</mdb-navbar>

Answer 1

Take the <br> out so it would look like this
[routerLink]="['subscribe-now']"
routerLinkActive="active">
<img src="../../../assets/imgs/icons/Subscribe 2.png" style="width: 7%; height: 7%;"/>
Subscribe Now
</a>
</li>