Angular bootstrap center few navbar items - html

Question

I have a simple navbar in which is there are multiple items i just need to center and make the last div to end.
My code
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto mt-2 mt-lg-0 justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">WHO WE ARE</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
WHAT WE DO
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MEDIA
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<div class="dropdown drp-user" ngbDropdown placement='auto'>
<a href="javascript:" ngbDropdownToggle data-toggle="dropdown">
<i class="icon feather icon-settings"></i>
</a>
<div class="dropdown-menu dropdown-menu-right profile-notification" ngbDropdownMenu>
<div class="pro-head">
<img src="assets/images/user/avatar-2.jpg" class="img-radius" alt="User-Profile-Image">
<span>{{userTitle}}</span>
<a href="javascript:" class="dud-logout" title="Logout" (click)="logout()">
<i class="feather icon-log-out"></i>
</a>
</div>
<ul class="pro-body">
<li *ngIf="user?.userTypeId == this.userTypeIdEnum.ADMIN"><a href="javascript:" class="dropdown-item"
routerLink="/manageprofile"><i class="feather icon-user"></i> Manage Profile</a></li>
<li><a href="javascript:" class="dropdown-item" routerLink="/auth/change-password"><i
class="feather icon-lock"></i> Change Password</a></li>
</ul>
</div>
</div>
</div>
</div>
In image i have marked red item which i need to do center if i am wrapping it to div then its not showing in a row.