菜单出现在屏幕边框外

Question

我有一个navBar菜单。单击时打开子菜单。

<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: '';
}

如下图所示，菜单超出了布局的规定区域。我希望它与右边距对齐。

我希望它符合屏幕的限制。但由于我是css的新手，我无法解决这个问题。