css - Bootstrap container-fluid and container -


i designing website using twitter bootstrap. working fine except header area.

screenshot

i have used .container-fluid set full-width background. , used .container put contents within 960px. problem logo background. want logo background area fill out left area outside .container class. possible?

here markup -

<div class="container-fluid full-width">         <div class="row-fluid header-top">             <div class="container">                 <div class="span4 logo-area">                     <div class="logo">                         <h1> <a href=""> hello.</a></h1>                     </div>                 </div>                  <div class="menu span8">                     <div class="navbar">                         <ul class="nav" id="nav">                             <li><a href="#"> home </a></li>                             <li><a href="#"> menu item2 </a></li>                             <li><a href="#"> menu item3 </a></li>                             <li><a href="#"> menu item4 </a></li>                             <li><a href="#"> menu item5 </a></li>                             <li><a href="#"> menu item6 </a></li>                                        </ul>                      </div>                 </div>             </div>         </div>     </div> 

thanks in advance.

it is, need remove flow of container either placing outside of it, or using css control giving position:absolute etc.

something like:

          <div class="logo">                 <h1> <a href=""> hello.</a></h1>             </div>  <style> .logo { position:absolute; top:100px; left:100px; } </style>  <div class="container-fluid full-width">         <div class="row-fluid header-top">             <div class="container">                  <div class="menu span8">                     <div class="navbar">                         <ul class="nav" id="nav">                             <li><a href="#"> home </a></li>                             <li><a href="#"> menu item2 </a></li>                             <li><a href="#"> menu item3 </a></li>                             <li><a href="#"> menu item4 </a></li>                             <li><a href="#"> menu item5 </a></li>                             <li><a href="#"> menu item6 </a></li>                                        </ul>                      </div>                 </div>             </div>         </div>     </div> 

Comments