How to stop the expansion menu appearing under logo in navbar - html

Question

I have a website with a Bootstrap navbar that has an icon on the left-hand side and an expansion menu on the right-hand side. On smaller devices, the expansion menu appears underneath the icon even when there's enough space for it on the same line as the icon. How can I stop this behaviour?
The above is how I want it to look on all small devices but the below is how it looks when the device width is less than 403px.
My code is below. So far I've tried changing the -sm on navbar-expand-sm but this just controls when the expansion button replaces the individual links it reveales.
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="/"><object data="media/bts-logo.svg" width="20%" height="20%" id="logo_url"></object></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/account">Account</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/logout">Logout</a>
</li>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="bi bi-globe"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/en">English</a>
<a class="dropdown-item" href="/fr">French</a>
</div>
</li>
</ul>
</div>
</nav>