Mobile menu isn't aligned properly - html

Question

I have built this navigation menu, but in mobile view the hamburger icon and the menu isn't displayed properly. The hamburger icon isn't aligned to the right properly and the menu items when opened dsiplayed next to the icon. I am using Bootstrap 5.
It looks like this:
Here is my code:
#navbarNavDropdown ul li ul.dropdown-menu {
border-radius: 0;
border-top-width: 3px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-style: solid;
border-color: #0087be;
margin-top: 17px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
padding-top: 0;
padding-bottom: 0;
}
#navbarNavDropdown ul li ul.dropdown-menu li {
border-bottom: 1px solid #ccc;
}
#navbarNavDropdown ul li ul.dropdown-menu li a:hover {
background-color: #0087be;
color: #ffffff;
transition: .4s;
}
#navbarNavDropdown ul li ul.dropdown-menu li a {
font-size: 13px;
padding-top: 8px;
padding-bottom: 8px;
}
.animate {
animation-duration: 0.6s;
-webkit-animation-duration: 0.6s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
#keyframes slideDown {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
#-webkit-keyframes slideDown {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
.slideDown {
animation-name: slideDown;
-webkit-animation-name: slideDown;
}
#media (max-width: 991.98px) {
ul.navbar-nav li:not(:last-child) {
border-bottom: 1px solid #ccc;
}
ul.navbar-nav li:hover {
padding-left: 10px;
transition: .5s;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="main-menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo3.png" alt="" width="150" class="img-fluid" lazy="loading">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 mr-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{ route('home') }}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pages</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pricing</a>
<ul class="dropdown-menu animate slideDown" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
Thank you for the help in advance.