I'm having trouble with my navbar dropdown menu extending off the page to the right.
Take a look at the code below:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7875756e696e687b6a5a2e342a342a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">PEL</a>
<div class="btn-group">
<button
type="button"
class="btn btn-secondary dropdown-toggle mr-3"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">${pseudo}</button>
<div class="dropdown-menu dropdown-menu-right">
<button
class="dropdown-item dropdown-menu-right"
type="button">Action</button>
<button
class="dropdown-item dropdown-menu-right"
type="button">Another action</button>
<button
class="dropdown-item dropdown-menu-right"
type="button">Something else here</button>
</div>
</div>
</nav>
While the dropdown functionality is working properly, it always extends beyond the screen on the right side...
https://i.sstatic.net/Hv9AW.png https://i.sstatic.net/FNp6p.png
There appears to be some excess spacing created by the dropdown menu on the right side of the page.