https://i.stack.imgur.com/tCuL6.png
I am hoping that this image will provide a visual aid for what I am trying to convey. My goal is to have the arrow and the boxes aligned in a row without any empty space on the right side. As you can see, the leftmost box aligns with the white box above it, which is also what I want to achieve on the right side. I will be sharing my code so you can see how I attempted to accomplish this.
Note: I have updated the image above. There is now a white box at the top followed by four boxes below it. I need to align the eplay box with the white box above and below it, as well as align the slide show demo box with the white box above and below it. Additionally, I need them to be evenly spaced and sized. After the eplay demo, theatre script demo, and audio speech demo boxes, I need to insert an arrow image between them, similar to the image provided below but with the right-side box aligned with the top and bottom white boxes.
https://i.stack.imgur.com/xOnbP.png
<!--===================DEMOS ==================-->
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 container-nopads" style="">
<div class="col-sm-2 col-md-2 col-lg-2 " >
<div class="demo-box col-sm-12 col-xs-12" id="demo-pdf">
<a href="/versebuster2/eplay/eplay-demo.php" style="text-decoration:none;">
<h4><strong>ePlay Demo</strong></h4><br><br><br>
<img src="images/hovers/pdf-512.png" >
</a>
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
<img src="images/arrow-right.png" class="img-responsive" >
</div>
<div class="col-sm-2 col-md-2 col-lg-2 " >
<div class="demo-box col-sm-12 col-xs-12" id="demo-doc">
<h4><strong>Theatre Script Demo</strong></h4><br><br>
<img src="images/hovers/doc-512.png" class="">
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
<img src="images/arrow-right.png" class="img-responsive" >
</div>
<div class="col-sm-2 col-md-2 col-lg-2 " >
<div class="demo-box col-sm-12 col-xs-12" id="demo-mp3">
<h4><strong>Audio Speech Demo</strong></h4><br><br>
<img src="images/hovers/mp3-512.png" class="">
</div>
</div>
<div class="col-xs-1 col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
<img src="images/arrow-right.png" class="img-responsive" >
</div>
<div class="col-sm-2 col-md-2 col-lg-2 " >
<div class="demo-box col-sm-12 col-xs-12" id="demo-pdf">
<a href="data/pdf/ePlayPPPDemo.pdf" target="_blank" style="text-decoration:none; ">
<h4><strong>Slide Show Demo</strong></h4><br><br><br>
<img src="images/hovers/pdf-512.png" class="">
</a>
</div>
</div>
</div>
</div>
<!--===================END DEMOS ==================-->