Bootstrap with cellular-aligned navbar

Question

I have the following code defining a navbar with bootstrap:

<nav class="navbar navbar-default">
  <div class="container">

<div class="col-xs-1 hidden-xs">
  <div class="navbar-header">
    <a href="#" class="pull-left">
      <img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png" width="50px" height="50px">
    </a>
  </div>
</div>
<!-- nav-bar-header -->

<div class="col-md-10 col-sm-10 col-xs-10">
  <form class="navbar-form" role="search">
    <div class="form-group" style="width: 100%;">
      <input type="text" class="form-control" placeholder="Pesquisar" style="width: 90%;">
      <div class="visible-lg-inline visible-md-inline">
        <button type="submit" class="btn btn-default"><i class="fa fa-fw fa-search"></i></button>
      </div>
    </div>
  </form>
</div>

<div class="col-md-1 col-sm-1 col-xs-2">
  <div class="navbar">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
</div>

<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Acessar o Sistema</a></li>
    <li><a href="#">Registrar</a></li>
  </ul>
</div>

</div>  <!-- container -->
</nav>

Since I need it to always condense (collapsed), I used the following code in css:

@media (max-width: 2000px) {
  .navbar-header {
    float: none;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-left,
  .navbar-right {
    float: none !important;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
    vertical-align: top;
    display: inline-block;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in {
    display: block !important;
  }
}

The problem is:

1. By reducing the browser screen size (e.g. mobile) the menu button is misaligned. Where I am missing?

I made a little model - Jsfiddle.

Thank you!