Bootstrap Navbar over width error

Question

Я положил navbar за пределы контейнера, чтобы сделать nabar получить полную ширину. Но странно, теперь navbar получает ширину (более чем ожидалось), теперь есть горизонтальная полоса прокрутки. это код:

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

    <section class=""> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> 
       <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 class="collapse navbar-collapse" id="collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active "><a href=""><span class="glyphicon glyphicon-home"></span></a></li> 
       <li class=" dropdown"><a href="#" data-toggle="dropdown">text menu<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="">text menu</a></li><li><a href="">text menu</a></li><li><a href="">text menu</a></li><li><a href="">text menu</a></li> 
        </ul>      
       </li> 
       <li class="" dropdown"=""><a href="#" data-toggle="dropdown">text menu <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="">text menu</a></li><li><a href="">text menu</a></li><li><a href="">text menu</a></li> 
        </ul> 
        </li> 
       <li class=" "><a href="">text menu</a></li> 
       <li class=" "><a href="">text menu</a></li> 
       <li class="dropdown"><a href="#" title="text menu" data-toggle="dropdown">text menu <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="" title="text menu">text menu</a></li> 
         <li><a href="" title="text menu">text menu</a></li> 
        </ul></li> 
      </ul> 
      <form role="form" class="navbar-form navbar-right" id="formCari" method="GET" action="search"> 
      <div class="form-group has-feedback"> 
      <input type="search" name="q" id="q" class="form-control" placeholder="text menu"> 
      <i class="form-control-feedback glyphicon glyphicon-search " style="position:absolute;/*top:7px;*/"></i> 
      </div> 
      </form> 
     </div> 
     </section> 

</div> 
</nav> 
</div> 

Благодарим за помощь!

Answer 1

Проблема в родительском элементе .row, что делает отображение .navbar странным.

Если вы удалите класс .row из первого div, он будет работать правильно.

CSS, что вызывает проблему (от начальной загрузки)

.row { 
    margin-right: -15px; 
    margin-left: -15px; 
}