Div is added when class is added.

Question

I have three divs

• Navbar
• Banner
• Content

What I want to do is make a background of navigational width, but all elements inside navbar have margin and center, as well as banner and content. Therefore, I add the nav-topmost class to the div containing the navbar. But when I add this class. Three divs overlap. Without this class, everything works fine, but my navigator doesn't have full width.

Can someone help me solve this problem? 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">
					<a href="#">SET HOME</a>
				</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>

Run code

Answer 1

, , . .nav-topmost div .container div. http://jsfiddle.net/amitv1093/z2eoxm4v/

--- --- HTML       

     <nav class="nav-topmost">
<div class="container">
        <div class="pull-right">
                    <a href="#">SET HOME</a>
                </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

, :

.nav-topmost
{
    position:relative;
    top:0;
}

.container, .clearfix, .banner{
    width:100%;
}

JSFiddle

Answer 3

remove the class nav-topmostfrom the container-liquid element and add it to the main navigation bar, for example,

<div class="container-fluid"> /* Remove nav-topmost */
        <div class="container">
            <div class="clearfix nav-topmost"> /* Add Here */
                <div class="pull-right">
                    <a href="#">SET HOME</a>
                </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>