menu appearing outside the screen border - css

Question

I have a navBar menu. when clicked opens a submenu.
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="collapse navbar-collapse" id="navegacao">
<ul class="navbar-nav mr-auto">
...
</ul>
<ul class="navbar-nav">
<div class="p-2"><i class="material-icons">face</i></div>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown">José da silva</a>
<div class="dropdown-menu" id="menuUsuario" style="padding: 2rem">
<app-menu-porteiro></app-menu-porteiro>
</div>
</li>
</ul>
</div>
</nav>
css
.dropdown-toggle::after {
display:none;
}
.dropdown-menu {
width: 300px;
}
#menuUsuario.dropdown-menu {
width: 300px;
}
#menuUsuario.dropdown-menu:before {
position: absolute;
top: -7px;
left: 4%;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
#menuUsuario.dropdown-menu:after {
position: absolute;
top: -6px;
left: 4%;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
As shown in the image below, the menu goes beyond the stipulated area of the layout. I would like it to be aligned to the right margin.
I want it to fit within the limit of the screen. But as I'm new to css I can not solve this problem.