html - Vertical alignment of navbar in tablet-landscape resolutions - link not aligned -

there's 1 link stays on top line, next "search jobs by," in certin screen resolutions of collapsed navbar. also, within these same resolutions, client login continues work "desktop/laptop" client login instead of mobile login. i'm having problem various tablet resolutions (when width between 768px , 1023px).

the "state" link, between widths 768px , 1023px, still on same line "search jobs by:" text in collapse navbar, per photo uploaded. also, client login dropdown operating expanded navbar version instead of collapsed navbar version within 768px , 1023px width range. picture above shows weird appearance.

see visual below:

http://www.bootply.com/cl8rgwpcqv

what's best way fix in bootstrap 3 (note: i'm using regular css/css3, neither less nor sass)?

<nav class="navbar navbar-default navbar-static-top" role="navigation">         <div class="container-fluid">           <!-- brand , toggle grouped better mobile display -->           <div class="navbar-header">             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#tusaj-main">               <span class="sr-only">toggle navigation</span>               <span class="icon-bar"></span>               <span class="icon-bar"></span>               <span class="icon-bar"></span>             </button>             <a class="navbar-brand brandmedia" href="#"><img src="img/logo_final.png" alt=""></a>           </div>            <!-- collect nav links, forms, , other content toggling -->           <div class="pspacerv20t spacerh10r">             <div class="collapse navbar-collapse" id="tusaj-main">               <ul class="nav navbar-nav navbar-right">                 <p class="navbar-text">search jobs by:</p>                 <li><a href="#">state</a></li>                 <li class="divider-vertical"></li>                 <li><a href="#"><div class="spacerh80"> category</div></a></li>                 <li><a href="#">post jobs</a></li>                 <li class="divider-vertical"></li>                 <li class="dropdown">                   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">client login <span class="caret"></span></a>                   <ul class="dropdown-menu" role="menu">                     <li>                       <form class="form-inline no-margin center-block" role="form">                         <div class="form-group pspacerv10b pspacerv10t">                           <div class="col-sm-5">                             <input type="text" placeholder="username" class="form-control">                           </div>                         </div>                         <div class="form-group pspacerv10b">                           <div class="col-sm-5">                             <input type="password" placeholder="password" class="form-control">                           </div>                         </div>                         <!--<div class="form-group pspacerv10b">                           <div class="col-sm-6">                             <div class="checkbox">                               <label><input type="checkbox"> remember me</label>                             </div>                           </div>                         </div> /-->                         <div class="form-group center-block pspacerv10b">                           <div class="col-sm-3">                             <button type="submit" class="btn btn-success">sign in</button>                           </div>                         </div>                       </form>                      </li>                   </ul>                 </li>               </ul>             </div>           </div><!-- /.navbar-collapse -->         </div><!-- /.container-fluid -->         <div class="tagline col-lg-12">           <p class="taglinealignright pspacerv15t spacerh25r">search jobs , careers: find ideal job. 1,000s of new jobs daily!</p>           <br />         </div>       </nav> 

demo