css - Bootstrap row height option -

first post - gentle :)

i've run issue row height in bootstrap (i think). i'm brand new bootstrap , i'm trying basic edits wordpress site , want further knowledge. had 4 items equally distributed across page , looked great. well, i've added fifth item , it's been dropped next row below first 4 isn't low enough on page , blocks content of 1 of original 4 items.

how can adjust height of offending row(s) drop bottom item low enough accommodate upper row?

link actual page: here please see image , code below.

offending item

html entire page:

<?php /* template name:home page */ get_header(); ?> <!-- banner starts --> <div class="banner">   <div data-ride="carousel" class="carousel slide" id="carousel-example-captions">       <ol class="carousel-indicators">         <li class="" data-slide-to="0" data-target="#carousel-example-captions"></li>         <li data-slide-to="1" data-target="#carousel-example-captions" class="active"></li>         <li data-slide-to="2" data-target="#carousel-example-captions"></li>       </ol>    <!-- wrapper slides -->   <div class="carousel-inner" role="listbox">   <?php $slides = get_field('slides','4');   if(is_array($slides) , count($slides)>0){   $num=0;                   foreach($slides $slides_val) {?>     <div class="item <?php if($num==0) echo "active"; ?>">   <img src="<?php echo $slides_val['slide_image']['url']; ?>" alt="900x500" data-src="holder.js/900x500/auto/#777:#777" data-holder-rendered="true">   <div class="carousel-caption">     <div class="banner-heading">     <span><?php echo $slides_val['slide_content_heading']; ?></span>     </div>     <?php echo $slides_val['slide_content']; ?>   <!--  <a href="<?php// echo get_site_url();?>/contact">contact us</a>-->   </div> </div> <?php $num++; } }?>    </div>    <!-- controls -->       <a data-slide="prev" role="button" href="#carousel-example-captions" class="left carousel-control">         <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>         <span class="sr-only">previous</span>       </a>       <a data-slide="next" role="button" href="#carousel-example-captions" class="right carousel-control">         <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>         <span class="sr-only">next</span>       </a>     </div> </div> <!-- banner ends -->  <!-- content starts --> <div class="content"> <div class="process-section"> <div class="container">     <div class="row">       <div class="process-heading">our process</div>       <div class="process-fillers-section">         <ul>         <?php                                     global $post,$paged;                                      $args = array(                                          'post_type'=>'process',                                         'orderby'=>  'post_date',                                                                                'order' => 'desc'                                             );                                 $wp_query= new wp_query($args);                          $no_of_posts=$wp_query->found_posts;                                  while ($wp_query->have_posts()):$wp_query->the_post();                                $src= wp_get_attachment_image_src(get_post_thumbnail_id($post->id),'full');                                  ?>            <li class="col-sm-4 col-md-4 col-lg-4">             <img src="<?php echo $src[0];?>" alt="" />             <div class="process-inner">             <div class="filler-title"><?php the_title(); ?></div>             <?php the_content(); ?>            <!-- <a href="<?php //the_permalink();?>">read more</a>-->             </div>           </li>             <?php    endwhile; ?>          </ul>       </div>     </div>   </div>   </div>   <?php include('vip.php');?>   <div class="service-section">     <div class="container">       <div class="row">       <div class="process-heading">our services</div>         <div class="process-fillers-section">           <ul>            <?php                                     global $post,$paged;                                      $args = array(                                          'post_type'=>'services',                                          'order' => 'asc'                                             );                                 $wp_query= new wp_query($args);                          $no_of_posts=$wp_query->found_posts;                                  while ($wp_query->have_posts()):$wp_query->the_post();                                $src= wp_get_attachment_image_src(get_post_thumbnail_id($post->id),'full');                                  ?>             <li class="col-sm-3 col-md-3 col-lg-3">               <div class="process-fillers-image-section">                  <img src="<?php echo $src[0];?>" alt="" />                  <div class="process-category"><?php the_title(); ?> </div>               </div>               <p><?php the_excerpt(); ?> </p>                <a href="<?php the_permalink();?>">read more</a>             </li> <?php                                   endwhile;                                 ?>              </ul>         </div>       </div>     </div>   </div>   <div class="instagram-section">   <div class="container">       <div class="row">    <div class="process-heading"> <div><img src="<?php bloginfo('template_url');?>/images/instagram-icon.png" alt="" /></div>    @h2htpe</div>  <?php  echo do_shortcode('[instagram]'); ?>    </div>   </div>   </div> </div> <!-- content ends -->  <?php get_footer('footer'); ?> 

wiki