By using overflow-y: hidden, you're telling the browser to hide anything that goes beyond the height of the element, and if necessary, show a horizontal scrollbar. In this case, clicking on the dropmenu shows the menu, but the dropmenu's width is larger than the Teams element. If you remove that, then the dropmenu in tablet/desktop views will appear correctly.
In the mobile view, padding: 0 causes the horizontal scrollbar to appear. Bootstrap's grid system works with negative margins, with equally positive paddings. By changing the left and right padding from 15px to 0, you're negating the offset of the left and right margin of -15px, causing horizontal scrollbars.
Removing both padding: 0 and overflow-y: hidden will result in the menu behaving just like Bootstrap intended. If you're trying to accomplish something other than what Bootstrap has designed, that fact hasn't been made that clear.
No idea why this is downvoted as it identifies why the scrollbars appear in the various viewing styles.