removing space b/w two columns Bootstrap - css

Question

Hi I am trying to make less space b/w the two images but I am unable to do so. when I add any css rule such as margin it breaks the columns. so what is the best way I can get images a bit closer to each other.
my site link: http://www.abiglittlebiz.com/trevelle/display-centres/
here is my code:
<div class="displaycenter">
<h2 class="displayh1"><?php echo "$main_heading";?></h2>
<div class="container">
<div class="row">
<div class="col-md-8">
<h2 class="displayh2"><?php echo "$display_heading";?></h2>
<div>
<?php if(!empty($ascot_image) ): ?>
<img src="<?php echo $ascot_image['url']; ?>" alt="<?php echo $ascot_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$ascot_text"; ?></h3>
<p class="details"><?php echo "$displaycenter1";?></p>
</div>
</div>
</div>
<div class="col-md-4">
<h2 class="displayh2"><?php echo "$display_heading2";?></h2>
<div>
<?php if(!empty($liberty_image) ): ?>
<img src="<?php echo $liberty_image['url']; ?>" alt="<?php echo $liberty_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$liberty_text"; ?></h3>
<p class="details"><?php echo "$displaycenter2";?></p>
</div>
</div>
</div>
<div class="col-md-8">
<div>
<?php if(!empty($alfa_image) ): ?>
<img src="<?php echo $alfa_image['url']; ?>" alt="<?php echo $alfa_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$alfa_text"; ?></h3>
<p class="details"><?php echo "$displaycenter3";?></p>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<?php if(!empty($odyssey_image) ): ?>
<img src="<?php echo $odyssey_image['url']; ?>" alt="<?php echo $odyssey_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$odyessy_text"; ?></h3>
<p class="details"><?php echo "$displaycenter4";?></p>
</div>
</div>
</div>
<div id="cs">
<h2 class="displayh1" id="cl"><?php echo "$second_heading";?></h2>
<div class="col-md-8">
<div>
<?php if(!empty($monte_image) ): ?>
<img src="<?php echo $monte_image['url']; ?>" alt="<?php echo $monte_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$monte_text"; ?></h3>
<p class="details"><?php echo "$displaycenter5";?></p>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<?php if(!empty($lot_image) ): ?>
<img src="<?php echo $lot_image['url']; ?>" alt="<?php echo $lot_image['alt']; ?>">
<?php endif; ?>
<div class="caption checkout-caption">
<h3 id="newpro"><?php echo "$monte_text"; ?></h3>
<p class="details"><?php echo "$displaycenter6";?></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>

Answer 1

You are using a col-md-8 class for the left column and a col-md-4 class for the right one. Why not make them both col-md-6 and apply the following CSS?
.row .col-md-6:first-of-type {
text-align: right;
}
This right aligns the content in the left column and eliminates most of the gap between columns. You'll probably have to play around with more CSS to polish things further, but this should give you a decent start.