twitter bootstrap - Responsive Gallery: overlayed captions will not line up to edges of images -

i putting simple responsive gallery using twitter-bootstrap.

i have captions appear overlayed onto images. should aligned bottom, right corners of each image.

i cannot them align, exceed edges of images.

html

    <div class="container">  <div class="row ">   <ul>          <li class="col-md-8 image">           <img class="img-responsive" src="http://i.imgur.com/1lltchm.jpg" width="940px" height="627px" />           <div class="desc">             <h2>caption text here</h2>           </div>         </li>   </ul> </div> 

css

    ul {   list-style-type: none;   }  img {   padding-bottom: 20px; }  div.desc{     background-color: #000;     bottom: 0;     color: #fff;     right: 0;     opacity: 0.5;     position: absolute;     width: 80%;     padding: 0px; }  .image {   width:100%;   padding:0px;   } 

you can see example here although due being embedded on jsfiddle appears switching small screen mode:

but can still see how captions exceed image edges.

i captions line image edges.

from can tell, captions aligning width of twitter-bootstraps .col-md-8 class. has padding create column gutter.

the solution postion margin values

for this, using negative(-) pixel in margin-top position

    <div class="container">  <div class="row ">   <ul>          <li class="col-md-8 image">           <img class="img-responsive" src="http://i.imgur.com/1lltchm.jpg" width="940px" height="627px" />           <div class="desc">             <h2>caption text here</h2>           </div>         </li>         <li class="col-md-4 image">         <img class="img-responsive" src="http://i.imgur.com/1lltchm.jpgg" width="940px" height="627px" />         <div class="desc">           <h2>caption text here</h2>         </div>       </li>        <li class="col-md-4 image">         <img class="img-responsive" src="http://i.imgur.com/1lltchm.jpg" width="940px" height="627px" />         <div class="desc">           <h2>caption text here</h2>         </div>       </li>   </ul> </div>  <div class="row">   <ul>       <li class="col-md-4 image">         <img class="img-responsive" src="http://i.imgur.com/1lltchm.jpg" width="940px" height="627px" />         <div class="desc">           <h2>caption text here</h2>         </div>       </li>       <li class="col-md-4 image">         <img class="img-responsive" src="http://i.imgur.com/1lltchm.jpg" width="940px" height="627px" />         <div class="desc">           <h2>caption text here</h2>         </div>       </li>       <li class="col-md-4 image">         <img class="img-responsive" src="http://i.imgur.com/1lltchm.jpg" width="940px" height="627px" />         <div class="desc">           <h2>caption text here</h2>         </div>       </li>   </ul> </div> 

css:

ul {  list-style-type: none;  }  img {  padding-bottom: 20px; }  div.desc{     background-color: #000;  margin-top: -72px; /*this trick*/ color: #fff; opacity: 0.5; width: 80%; } .image {  width:100%;  padding:0px; }