Div is overlapped when add class - html

Question

I have three div
Navbar
Banner
Content
What I want to do is make background of navbar full width, but all elements inside navbar have margin and center, also banner and content. So I add nav-topmost class to the div that contains navbar. But when I add this class. Three div is overlapped. Without this class, everything work fine but my navbar not full width.
Can anyone help me solve this issue? Thanks in advance !
Here is my code :
.nav-topmost
{
margin-bottom:20px;
padding:0;
height:50px;
background:#000;
}
.banner
{
height:100px;
background:#eee;
margin-bottom:15px;
}
.content
{
background:#bbb;
}
<link href="http://netdna.bootstrapcdn.com/bootswatch/3.0.0/united/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid nav-topmost">
<div class="container">
<div class="clearfix">
<div class="pull-right">
SET HOME
</div>
<div class="pull-right">
<input type="submit" value="Search" class="form-control"/>
</div>
<div class="pull-right">
<input type="text" class="form-control" />
</div>
</div>
<div class="banner">
BANNER
</div>
</div>
</div>
<div class="container">
<div class="content">
Some contents
</div>
</div>

Answer 1

I made some correction here and hope this is what you want.
I changed the structure and put .nav-topmost's div out of .container's div.
http://jsfiddle.net/amitv1093/z2eoxm4v/
---html---
<nav class="nav-topmost">
<div class="container">
<div class="pull-right">
SET HOME
</div>
<div class="pull-right">
<input type="submit" value="Search" class="form-control"/>
</div>
<div class="pull-right">
<input type="text" class="form-control" />
</div>
</div>
</nav>
<div class="container">
<div class="banner">
BANNER
</div>
</div>
</div>
<div class="container">
<div class="content">
Some contents
</div>
</div>
---css---
.nav-topmost
{
margin-bottom:20px;
padding:10px 0px;
background:#000;
}

Answer 2

Is this what you want:
.nav-topmost
{
position:relative;
top:0;
}
.container, .clearfix, .banner{
width:100%;
}
Here is the JSFiddle demo

Answer 3

remove nav-topmost class from container-fluid element and add it to the main navigation bar like this
<div class="container-fluid"> /* Remove nav-topmost */
<div class="container">
<div class="clearfix nav-topmost"> /* Add Here */
<div class="pull-right">
SET HOME
</div>
<div class="pull-right">
<input type="submit" value="Search" class="form-control"/>
</div>
<div class="pull-right">
<input type="text" class="form-control" />
</div>
</div>
<div class="banner">
BANNER
</div>
</div>
</div>