How do I stop my dropdown menu from jumping left to right? - html

Question

I'm using bootstrap's responsive navbar, in mobile devices it displays a dropdown menu. This menu, be default, is aligned to the left. I changed this so that is displays to the right. I did achieve this. However, when I test on my iPhone (XR), the dropdown first shows on the left and quickly moves to the right, on its own. How can I stop this?
You can see a small video of what's happening here.
/* Navbar */
.navbar-light .navbar-toggler {
color:rgba(46, 46, 46, 1);
border-color: transparent;
}
.navbar-custom {
background-color: #ffffff;
}
.navbar-custom .navbar-brand img {
width: 75%;
}
.navbar-light .navbar-nav .nav-link {
color: rgba(46, 46, 46, 1);
font-size: 0.9em;
text-transform: capitalize;
font-weight: 600;
border-radius: 0;
}
.navbar-light .navbar-nav .nav-link:hover {
color: #DA3D0D;
text-decoration: none;
}
.navbar-custom-dropdown {
border-radius: 0;
}
.navbar-custom-dropdown li a {
font-weight: 600;
line-height: 2em;
font-size: 0.9em;
}
.navbar-custom-dropdown li a:hover,
.navbar-custom-dropdown li a:focus {
background-color: #ffffff;
color: #DA3D0D;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
<a class="navbar-brand" href="index.html">
<img src="images/logo-briones-monolithic.svg" alt="Briones Monolithic">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-custom-link" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">INICIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PROYECTOS</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
GRUPO MONOLITHIC
</a>
<ul class="dropdown-menu navbar-custom-dropdown" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">BRIONES MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">BE MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">ELECTRIC MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">GRUPO MONOLITHIC</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACTO</a>
</li>
</ul>
</div>
</nav>
<!-- /NAVBAR -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>