html - Css break div in some unknown reason -

i trying view image width 100% width.and inner div should 25%.when zoom in div wont break.how can this.i giving html,css code below :

html :

<div class="container-a1">         <ul class="caption-style-1">             <li>              <div class="hover-effect">                            <div class="opacity"><img src="http://bassbrushes.diggsdev.com/wp-content/themes/diggsdesign_1/images/td1.png" alt="" width="225px" height="127px"></div>                          <h1><a href="#">styling & detangling</a></h1>                              <br/>                            </div>                <div class="caption">                       <div class="caption-text">                     <img src="http://bassbrushes.diggsdev.com/wp-content/themes/diggsdesign_1/images/td2.png" alt="" width="225px" height="127px">                   </div>                 </div>             </li>              <li>              <div class="hover-effect">                            <div class="opacity"><img src="http://bassbrushes.diggsdev.com/wp-content/themes/diggsdesign_1/images/tb1.png" alt="" width="235px" height="127px"></div>                          <h1><a href="#">smoothing, shining & texturizing</a></h1>                              <br/>                            </div>                <div class="caption">                       <div class="caption-text">                     <img src="http://bassbrushes.diggsdev.com/wp-content/themes/diggsdesign_1/images/tb2.png" alt="" width="235px" height="127px">                   </div>                 </div>             </li>                          <li>              <div class="hover-effect">                            <div class="opacity"><img src="http://bassbrushes.diggsdev.com/wp-content/themes/diggsdesign_1/images/ta1.png" alt="" width="235px" height="127px"></div>                          <h1><a href="#">curling & straightening</a></h1>                              <br/>                            </div>                <div class="caption">                       <div class="caption-text">                     <img src="http://bassbrushes.diggsdev.com/wp-content/themes/diggsdesign_1/images/ta2.png" alt="" width="235px" height="127px">                   </div>                 </div>             </li>   <li>              <div class="hover-effect">                            <div class="opacity"><img src="http://bassbrushes.diggsdev.com/wp-content/themes/diggsdesign_1/images/tc1.png" alt="" width="235px" height="127px"></div>                          <h1><a href="#">hair brush sets</a></h1>                              <br/>                            </div>                <div class="caption">                       <div class="caption-text">                     <img src="http://bassbrushes.diggsdev.com/wp-content/themes/diggsdesign_1/images/tc2.png" alt="" width="235px" height="127px">                   </div>                 </div>             </li>            </ul>     </div> 

css :

.container-a1 {    width:100%;    position:relative;    float:left; }   .caption-text {       }     .caption-style-1{         list-style-type: none;         margin: 0px;         padding: 0px;      }      .caption-style-1 li{         float: left;         padding: 0px;         position: relative;         overflow: hidden;         margin: 0 5px 0 0;     }      .caption-style-1 li:hover .caption{         opacity: 1;     }  .caption-style-1 .hover-effect{     margin: 0px;     margin-right:9px; /* l */     padding: 0px;     float: left;     width:225px; /* l */ /* tiles size */      height:127px; /* l */ /* tiles size */      background-color:#a3876f; /* inactive bg color */ /* l */     margin-bottom:25px; /* l */     border-radius: 3px 3px 3px 3px; /* l */     }  .hover-effect img{     margin: 0px;     padding: 0px;     float: left;     z-index: 4;     }  .hover-effect h1 {     font-size:1.3em;     font-weight:300;         position:absolute;         z-index:999;     -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;     margin:50px 0px;     padding:0px; /* l */     text-align:center;         width:233px;         } .hover-effect p {     font-size:0.82em; /* description font size */ /* l */     font-weight:400; /* l */     font-style:italic; /* l */     /* margin:63px 22px 0px; /* l */     padding:0;     position:absolute;     z-index:999;     margin-top:100px;     -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;     margin:50px 0px; /* l */ } .hover-effect a,.hover-effect p {     margin:74px 0px; padding:0px; /* l */     text-decoration:none;     color:#ffffff; /* text color */ /* l */     text-shadow:0 1px 2px #6e5743; /* l */ } .caption-style-1 li:hover h1,   .caption-style-1 li:hover p{    opacity:0; } .caption-style-1 .caption{         cursor: pointer;         position: absolute;         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;         background-color:#ffffff !important; /* l */ } .caption-style-1 .blur{         /*background-color: rgba(0,0,0,0.65);*/         height: 150px;         width: 220px;         z-index: 5;         position: absolute; } .caption-style-1 .caption-text h1{     text-transform: uppercase;     font-size: 10px; } .caption-style-1 .caption-text .blur{     z-index: 10;     color: #fff;     position: absolute;     width: 220px;     height: 150px;     text-align: center;     background-color: rgba(0,0,0,0.65);   }