SO wide row outside grid

SO wide row outside grid

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div class="container">
	<div class="row-fluid">
		
        <div class="span12 head">Head content</div> <!-- close span 12 -->
        </div><!-- close row -->
    
        <div class="row-fluid">
            <div class="span12 nav">nav bar</div> <!-- close span 12 --> 
    </div><!-- close row -->
    </div><!-- close container -->

<div class="wideRow"> 
    <div class="ad1">Ad 1</div>
    <div class="ad2">Ad 2</div>
    <div class="ad3">Ad 3</div>
</div> <!-- close wideRow -->

<div class="container">
	<div class="row-fluid">
		<div class="span12 content">
   			remainder of page content
    	</div> <!-- close span 12 -->
    
        
    </div><!-- close row -->
    </div><!-- close container -->

CSS

.head{
    height:100px;
    background-color:#999;
}

.nav{
    height:50px;
    background-color:green;
    margin-top:2px;
    color:white;
    margin-bottom:2px;
}

/* in practice, to have more control you would probably use @media requests to define the ad blocks */
.ad1{
    background-color:olive;
    width:25%;
    float:left;
  	height:100vh;
}
.ad2{
    background-color:blue;
    width:50%;
    float:left;
  	height:100%;
}
.ad3{
    background-color:teal;
    width:25%;
    float:left;
  	height:100%
    
;
}

.content{
    height:500px;
    background-color:#ffa;
}