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

Question

There's one link that stays up on the top line, next to "search jobs by," in certin screen resolutions of the collapsed navbar. Also, within these same resolutions, the client login continues to work like the "desktop/laptop" client login instead of the mobile login. I'm having this problem with various tablet resolutions only (when width is between 768px and 1023px).
The "State" link, between widths 768px and 1023px, is still on the same line as the "Search jobs by:" text in the collapse navbar, as per the photo I uploaded. Also, the client login dropdown is operating like the expanded navbar version instead of the collapsed navbar version within the 768px and 1023px width range. The picture above shows this weird appearance.
See visual below:
http://www.bootply.com/Cl8RGWpCqv
What's the best way to fix this 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 and toggle get grouped for 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 the nav links, forms, and other content for 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>State</li>
<li class="divider-vertical"></li>
<li><div class="spacerh80"> Category</div></li>
<li>Post Jobs</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Client Login <span class="caret"></span>
<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 and Careers: Find Your Ideal Job. 1,000s of New Jobs Daily!</p>
<br />
</div>
</nav>
Demo