<div class="user-box text-center">
<img src="assets/images/users/user-1.jpg" alt="user-img" title="Mat Helme" class="rounded-circle img-thumbnail avatar-md">
<div class="dropdown">
<span class="user-name h5 mt-2 mb-1 d-block">Nowak Helme</span>
</div>
<p class="text-muted">Admin Head</p>
<ul class="list-inline">
<li class="list-inline-item">
<div class="dropdown">
<a href="#" class="text-muted dropdown-toggle h5 mt-2 mb-1 d-block" data-toggle="dropdown" aria-expanded="false">
<i class="fas fa-cog"></i>
</a>
<div class="dropdown-menu user-pro-dropdown">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="fe-user mr-1"></i>
<span>My Account</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="fe-settings mr-1"></i>
<span>Settings</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="fe-lock mr-1"></i>
<span>Lock Screen</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="fe-log-out mr-1"></i>
<span>Logout</span>
</a>
</div>
</div>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fas fa-power-off"></i>
</a>
</li>
</ul>
</div>
I am struggling to center a dropdown within the user-box element in my code. Could someone kindly assist me in resolving this issue? The attached screenshot provides visual context for reference.