Dropdown menu causes scrollbar

Question

I used this example from W3C:

<div class="dropdown">
    <button class="btn btn-sm dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
        <span class="glyphicon glyphicon-menu-hamburger"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
        <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
        <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
    </ul>
</div>

And it all works, except for one thing. Whenever dropdown is opened it outfits the page making a horizontal scrollbar to appear. Ref screenshot below (note horizontal scrollbar at the bottom of the images):

What would be most "official" way to fix this?

EDIT:

---

Added fiddle: https://jsfiddle.net/aav5f25g/3/

Answer 1

Could you try this?

<div class="dropdown">
    <button class="btn btn-sm dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
        <span class="glyphicon glyphicon-menu-hamburger"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="menu1">
        <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
        <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
        <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
    </ul>
</div>

I added dropdown-menu-right to the dropdown-menu

You may find that pull-right works if you're using an older version.