Adding a search bar into main menu on Bootstrap - css

Question

I'm making a website using Twitter's Bootstrap and everything is almost set but I can't figure how to position a search bar into the main menu
Here is the website online
http://testings.coffeecup.com/index1.html
Each time I put it anywhere on the container it screws up either.
EDIT:
I managed to add it:
http://gyazo.com/e76b7cfa8e25b9ef2913d588b28ea894
But I still can't position it on the right.
The css I'm using
.navbar-search {
position: relative;
}
.navbar-search .search-query {
float:right;
}
.navbar-search .icon-search {
position: absolute;
top: 7px;
background-image: url("");
}

Answer 1

Right after the <div class="navbar-inner"> include the search bar <input> with whichever attributes you need .. after just float it to the right and adjust the margins so its centered vertically in the nav-bar.

Answer 2

You have to add the search-bar inside <div class="navbar-inner"> and after <div class="nav-collapse collapse">.
The code for the search bar:
<input id="search" class="span3" type="search" name="search" placeholder="Search">

Answer 3

You can use the pull-right class
i used it in the container
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-search pull-right" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
REsult :