php - Blanks space between images in slider -

i making dynamic slider laravel. need slide content , image in database. have gap(white space) between slides. first image slides content, second blank , after sometime third image slides , after third image there blank page slide.

i have 2 images in database , in folder. image should slides 1 after not happening. may have mistake in if else statement.

my html code slider this,it works well

<section>   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">     <!-- indicators -->     <ol class="carousel-indicators">       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>       <li data-target="#carousel-example-generic" data-slide-to="1"></li>     </ol>      <!-- wrapper slides -->     <div class="carousel-inner" role="listbox">       <div class="item active">         <div class="bnr-img">           <img src="css/images/banner.jpg" alt="..." style="width:100%;">           <div class="carousel-caption">             group com family hospitalization<br> insurance           </div>         </div>           <h1>"we there when need most"</h1>       </div>       <div class="item">         <div class="bnr-img">           <img src="css/images/bnr-medi.jpg" alt="..." style="width:100%;">           <div class="carousel-caption">             health insurance           </div>         </div>          <h1>"securing health"</h1>       </div>            </div>      <!-- controls -->     <a class="left carousel-control arw1" href="#carousel-example-generic" role="button" data-slide="prev">       <img src="css/images/arw-left.png" class="img-responsive">     </a>     <a class="right carousel-control arw1" href="#carousel-example-generic" role="button" data-slide="next">       <img src="css/images/arw-right.png" class="img-responsive">     </a>   </div> </section><!--slider end--> 

my code dynamic slider this:

<h2>services</h2> <div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">   <!-- wrapper slides -->   <div class="carousel-inner inner" role="listbox">     @if(isset($services))       @foreach($services $service)         <div class="item active">         </div>         <div class="item">           <div class="col-md-4">             <img src="frontend/services/{{$service->image}}">           </div>           <div class="col-md-8">             <p>               <span class="hilights2">{{$service->title}}</span><br>               {{$service->description}}               <a href="services-polices/{{$service->id}}" class="link">read more</a>             </p>           </div>         </div>       @endforeach     @endif   </div>   <!-- controls --> 

most have unwanted margin on 1 of elements. try right clicking , hitting inspect element see element taking whitespace, , using css set margin:0;