Bootstrap dropdown login form floating out of screen - html

Question

Here I am trying a sample bootstrap form that has a login dropdown, for username and password, I am including the code below, when the login form is activated, the form floats out of the menu on the right side of the screen, The code is below:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target="nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand" title="">
Test
</a>
<ul class="nav nav-pills pull-right">
<li>
<form class="input-append" method="GET" action="/search" style="margin-top:4px;margin-bottom:5px;">
<input type="text" title="Enter keyword(s) to find" id="TT" name="TT" class="span2" maxlength="40">
<button type="submit" class="bton">
<i class="icon-search" title="Search"></i>
</button>
</form>
</li>
<li class="dropdown" id="menuLogin">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">Login</a>
<div class="dropdown-menu" style="padding:17px;">
<form id="formLogin" class="form">
<label>Login</label>
<input name="username" id="username" type="text" placeholder="Username" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Enter your username" required="">
<input name="password" id="password" type="password" placeholder="Password" title="Enter your password" required=""><br>
<button type="button" id="btnLogin" class="btn">Login</button>
</form>
<form>New User? Sign-up..</form>
<form id="formRegister" class="form collapse">
<input name="email" id="inputEmail" type="email" placeholder="Email" required="">
<input name="username" id="inputUsername" type="text" placeholder="Username" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a username" required=""><br>
<input name="password" id="inputpassword" type="password" placeholder="Password" required="">
<input name="verify" id="inputVerify" type="password" placeholder="Password (again)" required=""><br>
<button type="button" id="btnRegister" class="btn">Sign Up</button>
</form>
</div>
</li>
</ul>
What is the problem in the dropdown, I tried a nav pull-left in the dropdown,
but it did not work, thanks.

Answer 1

Fixed the bug, the line reading:
<div class="dropdown-menu" style="padding:17px;">
should have a dropdown-menu-right added so the correct line should be:
<div class="dropdown-menu dropdown-menu-right" style="padding:17px;">
The "dropdown-menu-right" wraps the menu correctly!