Dropdown menu width too wide

I’m using this markup but the resulting dropdown items are wider than the menu container. I’m not sure if this is Bootstrap 4 default appearance but I’d like to have my menu items not overlap the width of the menu. Here’s the code and a screenshot:

<b-nav-item-dropdown right v-if="this.$store.getters.authenticated">
            <template slot="button-content">
              <em>Signed In</em>
            </template>
            <b-dropdown-item href="#">Profile</b-dropdown-item>
            <b-dropdown-item href="#">Signout</b-dropdown-item>
</b-nav-item-dropdown>

Note, this only appears to be happening in Safari on OS X. Chrome is ok, see below:

Thanks, Cliff.

[tmorehouse]

See here for an example: https://jsfiddle.net/mn8zrtos/

[mariebehzadi]

Thank you so much!