Css 删除带两列引导的空间b/w

嗨，我正试图减少空间的b/w的两个图像，但我不能这样做。当我添加任何css规则（如边距）时，它会打断列。那么，我能让图像彼此靠近一点的最好方法是什么呢

我的网站链接：

这是我的代码：

<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(); ?>

“alt=”“>

“alt=”“>

“alt=”“>

“alt=”“>

“alt=”“>

“alt=”“>

您正在使用

col-md-8

类作为左栏，使用

col-md-4

类作为右栏。为什么不让它们同时使用

col-md-6

，并应用以下

CSS

.row .col-md-6:first-of-type {
  text-align: right;
}

这将右对齐左列中的内容，并消除列之间的大部分间隙。您可能需要使用更多CSS来进一步完善内容，但这会给您一个良好的开端

---

除了安德鲁的回答。尝试将你的.col-md-8和.col-md-4改为.col-md-6，这样第一个div将是左内容和右内容Andy，这方面运气好吗？如果是这样，请做一个运动员，点击答案旁边的复选标记接受我的答案。