Twitter Bootstrap: navbar with button

strange behaviour

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css">
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header pull-left">
      <a href="/" target="_top" class="navbar-brand">Index Livraria</a>
    </div>

    <div class="collapse navbar-collapse">

        <div class="col-sm-3 col-md-3">
          <form class="navbar-form" role="search">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
              <button class="btn btn-info" type="submit">Search</button>
            </div>
          </div>
          </form>
        </div>

        <ul class="nav navbar-nav pull-right">
          <li class="dropdown">
            <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
              My Cart (<span class="cart-count"><%= @cart.cart_count %></span>)
            </a>
            <div class="panel panel-info dropdown-menu cart-list">
              <table class="table">
<% @cart.cart_items.each do |item| %>
    <tr>
      <td>
        <div class="imgthumb">
          <%= image_tag item.product.photo.url(:thumb) %>
        </div>
      </td>
      <td>
        <p><%= link_to item.product.name, item.product %></p>
        <%= number_with_precision item.product.price, precision: 2 %>
      </td>
      <td>
        <%= select_tag 'quantity', options_for_select((1..10).step(1), item.amount), class: 'item-quantity-field', onchange: "updateQuantity(#{item.id}, this)" %>
        <p><%= link_to "Remove", remove_from_cart_path(item),...

CSS

nav.navbar{
    margin-top:20px;
    width:100%;
    position:absolute;
        top:0;
    left:0;
}

.navbar-inner{
   margin-top:20px; 
}
/*SEARCH FORM*/
/*@soldierupdesign*/
.search-form {
    border-radius: 30px 0px 0px 30px;
    /*border-radius:Top-left, Top-right, Bottom-right, Bottom-left;*/
}
/*to cange only one form and not all give unique class name like  class="search-form" */
 .search-btn {
    border-radius: 0px 30px 30px 0px;
    cursor:pointer;
}

JavaScript

$('body').popover({
    selector: '[rel=popover]',
    trigger: "hover"    
});