两个 Div 之间的固定宽度间隙

有谁知道如何修复两个 div 之间的间隙？ 我有一个主要内容 Div，里面有两个带有图片的 Div。视图的宽度为 768 像素，当我开始拉伸视图时，两张图片开始相互远离。但理想情况下，主要内容 Div 应该在周围有空白的情况下拉伸，并且图片之间应该保持固定的间隙。

HTML:

<div class="main-content">
        <h2 class="title-two" id="portfolio">PORTFOLIO</h2>
      <div class="column-left left">
         <img src="images/picture1.png" class="first">
         <h2>Title</h2>
         <p>Text field</p>
      </div>
      <div class="column-left right">
         <img src="images/picture2.png" class="first">
         <h2>Title</h2>
         <p>Text field</p>
      </div>
      <div class="column-right left">
         <img src="images/picture3.png" class="first">
         <h2>Title</h2>
         <p>Text field</p>
      </div>
      <div class="column-left right">
         <img src="images/picture4.png" class="first">
         <h2>Title</h2>
         <p>Text field</p>
      </div>
</div>

CSS:

@media  (min-width: 768px) {

 .left {
    display: block;
    float:left;
    width: 47%;
    padding-left: 2%;
 }

 .right {
    display: block;
    float:right;
    width:  47%;
    padding-right: 2%;
 }
}

同样的问题也出现在标题中，其中文本和图标开始相互远离，尽管它们之间的间距应保持不变。

我读过 Flexbox 应该有帮助，但是当我将显示设置为 Flex 时，所有图片都在随机位置。

在你的CSS中使用margin-left和margin-right

@media  (min-width: 768px) {

 .left {
    display: block;
    float:left;
    width: 47%;
    margin-left: 2%;
 }

 .right {
    display: block;
    float:right;
    width:  47%;
    margin-right: 2%;
 }
}