css - Stretching a div across the width of the screen in bootstrap -

i wish stretch div blue across width of screen used inside container class in bootstrap. here's code

<div class='container'>     <img src="http://lorempixel.com/175/80/sports/1" width="230" height="70" class="pull-left" />     <div class='clearfix'></div>     <div class= 'padding-top'></div>     <div class="blue"></div>     <div class="padding-bottom"></div> 

here's css blue div

.blue{     border-top:3px solid #8dbf43;     width:100% !important; } 

but directive doesn't seem working, still contained inside container.

in order stretch :

james answer usefull : https://stackoverflow.com/a/22556241/2454790

bootply : http://www.bootply.com/123651

css :

.blue{     border-top:3px solid #8dbf43;     width:100% !important;   height:200px;            // <-- height of div   background:blue;   position: absolute;     // <-- important    left:0;                 // <-- make div begin @ left   color:white;   padding-left:15px;      // <-- remove bootstrap padding parent (-15px)   padding-right:15px; }  .padding-bottom{   margin-top:200px;      // <-- make margintop same height of .blue     height:200px;   background:yellow;   } 

html : sames given