Bootstrap Navbar over width error - html

Question

I put navbar outside the container to make the nabar get the full width. But strangely now the navbar get over width (more than expected), there is a horizontal scroll bar now. this is the code:
<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 "><span class="glyphicon glyphicon-home"></span></li>
<li class=" dropdown">text menu<span class="caret"></span>
<ul class="dropdown-menu">
<li>text menu</li><li>text menu</li><li>text menu</li><li>text menu</li>
</ul>
</li>
<li class="" dropdown"="">text menu <span class="caret"></span>
<ul class="dropdown-menu">
<li>text menu</li><li>text menu</li><li>text menu</li>
</ul>
</li>
<li class=" ">text menu</li>
<li class=" ">text menu</li>
<li class="dropdown">text menu <span class="caret"></span>
<ul class="dropdown-menu">
<li>text menu</li>
<li>text menu</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>
Thank you for your help!

Answer 1

The problem is in the parent .row element, which is making the .navbar to display weirdly.
If you remove the class .row from the first div, it will work properly.
CSS that is causing the problem (from bootstrap)
.row {
margin-right: -15px;
margin-left: -15px;
}