title: Dropdown menu causes scrollbar
body: <p>I used this <a href="http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp" rel="nofollow noreferrer">example from W3C</a>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="dropdown"&gt;
      &lt;button class="btn btn-sm dropdown-toggle" type="button" id="menu1" data-toggle="dropdown"&gt;
          &lt;span class="glyphicon glyphicon-menu-hamburger"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu" role="menu" aria-labelledby="menu1"&gt;
          &lt;li role="presentation"&gt;&lt;a role="menuitem" href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation"&gt;&lt;a role="menuitem" href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation"&gt;&lt;a role="menuitem" href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
          &lt;li role="presentation"&gt;&lt;a role="menuitem" href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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):</p>
  
  <p><a href="https://i.stack.imgur.com/ykLX8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ykLX8.png" alt="enter image description here"></a> <a href="https://i.stack.imgur.com/fAKHh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fAKHh.png" alt="enter image description here"></a></p>
  
  <p>What would be most "official" way to fix this?</p>
  
  <p>EDIT:</p>
  
  <hr>
  
  <p>Added fiddle: <a href="https://jsfiddle.net/aav5f25g/3/" rel="nofollow noreferrer">https://jsfiddle.net/aav5f25g/3/</a></p>