Bootstrap nav collapse - Menu items not aligning in toggle dropdown

Question

I implemented this Bootstrap 3 Navbar Collapse to change the navbar collapse but I am having a problem with the toggle on the nav.

I put in this for min-width: 992px to make my menu hover open rather than toggle for desktop sizes.

ul.nav li.dropdown:hover ul.dropdown-menu { 
display: block; 
}              /* adding hover effect to bs navbar only for md size and up */

.dropdown-menu > li > a {
text-align: right;
}

The problem I'm having is that when I toggle a menu item in the sm size. The dropdown menu doesn't toggle directly below. It goes off to the right hand side. I can't seem to find what is the css selector that is putting it directly below while the other items "move out of the way"

This is what is happening

I want this for sm-size

Tried to insert my code into bootply... it doesn't collapse properly on there though??? http://www.bootply.com/Q2fqP7kfAK

Answer 1

Found out that the css for changing the collapse had a

.navbar-nav>li {
        float: none;
    }

that caused it to drift off to the side until it hit xs! Removed it and it's a-ok

thanks!

Answer 2

set width for a tag

.dropdown-menu > li > a {
     text-align: right;
     width : 100%;
}