Overlay issue with Bootstrap

Question

I have problems with the CSS overlay. the overlay pattern doesn't stretch on the whole width of the image size. There is always a small border on the left side. Any ideas? http://www.bootply.com/FrnoIvUpxS

.img-container {
    position: relative;
    cursor: pointer;
    display: table;
    overflow:hidden;
text-align:center;  
width:100%;
min-height: 360px;
}

.img-container img {
 opacity: 1;
    position: absolute;
    min-height:360px;
    width: 500px;
}


.img-container .overlay {

    position: relative;

    height: 100%;
    vertical-align:middle;
    display: table-cell;
    background-color:rgba(130,216,209,0.00);
    opacity:0.0;
}


.img-container p{
    width:inherit;
    margin-top:25px;
    } 
.img-container h3 {

     } 
.img-container:hover .overlay {
background-color:rgba(130,216,209,0.9); 

        opacity:1;
 }
 .img-container:hover img{
        -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    opacity:1;}

    .img-container:hover p, .img-container:hover h3 { }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">

<div class="img-container">
  <img src="http://placehold.it/500x500" class="img-responsive" alt="">
  <div class="overlay">
  <h3>TIBET</h3>
  <p>RISING IN THE NORTH</p>
  </div>
  </div>

</div>
<div class="col-md-4">
<div class="img-container">
  <img src="http://placehold.it/500x500" class="img-responsive" alt="">
  <div class="overlay">
  <h3>POKER</h3>
  <p>PLAY YA CARDS RIGHT</p>
  </div>
  </div>

</div>
<div class="col-md-4">
<div class="img-container">
  <img src="http://placehold.it/500x500" class="img-responsive" alt="">
  <div class="overlay">
  <h3>INDUSTRY</h3>
  <p>MACHINES THAT DO IT</p>
  </div>
  </div>
</div>
</div>

</div>

Answer 1

Try this:

1. table-layout: fixed to .img-container;
2. width: 100% to .img-container .overlay.

.img-container {
    position: relative;
    cursor: pointer;
    display: table;
    table-layout: fixed;
    overflow: hidden;
    text-align: center;
    width: 100%;
    min-height: 360px;
}

.img-container img {
    opacity: 1;
    position: absolute;
    min-height: 360px;
    width: 500px;
}

.img-container .overlay {
    position: relative;
    height: 100%;
    vertical-align: middle;
    display: table-cell;
    width: 100%;
    background-color: rgba(130, 216, 209, 0.00);
    opacity: 0.0;
}

.img-container p {
    width: inherit;
    margin-top: 25px;
}

.img-container:hover .overlay {
    background-color: rgba(130, 216, 209, 0.9);
    opacity: 1;
}

.img-container:hover img {
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    opacity: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="img-container">
                <img src="http://placehold.it/500x500" class="img-responsive" alt="">
                <div class="overlay">
                    <h3>TIBET</h3>
                    <p>RISING IN THE NORTH</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="img-container">
                <img src="http://placehold.it/500x500" class="img-responsive" alt="">
                <div class="overlay">
                    <h3>POKER</h3>
                    <p>PLAY YA CARDS RIGHT</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="img-container">
                <img src="http://placehold.it/500x500" class="img-responsive" alt="">
                <div class="overlay">
                    <h3>INDUSTRY</h3>
                    <p>MACHINES THAT DO IT</p>
                </div>
            </div>
        </div>
    </div>
</div>

P.S. Please, format your code before posting or creating code snippet.