html - Background Color with Bootstrap -

i seem having problems lining background color of row in bootstrap. background right of second placeholder box solid color, right it's taking account additional padding, , it's not aligning properly. background color pertrudes past main header image.

any suggestions? you'll need extend width of page in jsfiddle see i'm talking about.

js fiddle: http://jsfiddle.net/aukme1mb/

<div class="container">     <div class="row">         <div class="col-md-12">             <img class="img-responsive" src="http://placehold.it/1140x360">         </div>     </div>     <div class="row bg">         <div class="col-md-5">             <img class="img-responsive" src="http://placehold.it/458x304">         </div>         <div class="col-md-7">             <p>text here</p>         </div>     </div> </div>  body {     background-color: #f0f0f1; } .bg {     background-color: #cbede7; }        

remove right padding left column

<style> .bg {     background-color: #cbede7; } .no-pad-right {     padding-right: 0 } </style>   <div class="container">      <div class="row bg">         <div class="col-md-5 no-pad-right">             <img class="img-responsive" src="http://placehold.it/458x304">         </div>         <div class="col-md-7">             <p>text here</p>         </div>     </div> </div> 

edit: you'll want play around padding on col-md-7 , col-md-5 divs, want.

also, there's nice javascript solution called jquery.matchheight.js, match each column particular class tallest column class - work in situation.

"matchheight makes height of selected elements equal. handles many edge cases cause similar plugins fail."

https://github.com/liabru/jquery-match-height