Reputation: 237

Why won't div take width of its closest parent?

 <div class="container col-lg-12 col-sm-12">

      <div class="row">
        <div class="col-lg-6 clear-L-R">
             <div class="fix">
            <img src="http://lorempixel.com/640/400/nature" class="img-responsive clear-L-R center-block" alt="">

                <div class=" caption caption-text">
                    <h1>Amazing Caption</h1>
                    <p>Whatever It Is - Always Awesome</p>
                </div>
          </div>
        </div>

        <div class="col-sm-12 col-lg-6 clear-L-R">
            <div class="fix">
            <img src="http://lorempixel.com/640/400/nature" class="img-responsive center-block" alt="">

                <div class="caption caption-text">
                    <h1>Amazing Caption</h1>
                    <p>Whatever It Is - Always Awesome</p>
                </div>
            </div>
        </div>

<style>


body {
  padding-top: 50px;
}
.spacer {
  margin-top: 2%;
  margin-bottom: 2%;
}    




.caption{
    cursor: pointer;
    position: absolute;
    top:0;
    height:100%;
    width:100%;
    background-color: rgba(0,0,0,0.65);
    opacity: 0;
    -webkit-transition:all 0.45s ease-in-out;
    -moz-transition:all 0.45s ease-in-out;
    -o-transition:all 0.45s ease-in-out;
    -ms-transition:all 0.45s ease-in-out;
    transition:all 0.45s ease-in-out;
    left:0;   /** new  **/
    right:0;  /** new  **/
}
.caption:hover{
    opacity: 1;
}
.caption-text h1{
    text-transform: uppercase;
    font-size: 24px;
}
.caption-text{
    color: #fff;
    text-align: center;
}    

</style>

http://velnikolic.com/ToddNew/

The caption should only take the width of the .fix div, but its taking its value from the col-lg-6 div can't figure out why. Scroll down to gallery for example. Tried to follow an example on here, but it's still doing that after triple checking the code.