Fixed width gap between two Div's - html

Question

Does anyone have ideas how to get gap between two divs fixed?
I have one main content Div and inside it there are two Div's with pictures. View is 768px wide and when I start to stretch the view, two pictures start to move away from each other. But ideally main content Div should stretch with whitespace around and pictures should remain with fixed gap between them.
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%;
}
}
Also same problem is in header where text and icon start to move away from each other, although their space between should remain same.
I have read that flexbox should help, but when I set display to flex, all pictures are in random places.

Answer 1

use margin-left and margin-right in your css
#media (min-width: 768px) {
.left {
display: block;
float:left;
width: 47%;
margin-left: 2%;
}
.right {
display: block;
float:right;
width: 47%;
margin-right: 2%;
}
}

Answer 2

Use margin-right and margin-left. Like this. As you can see, there is a gap between the divs.
.right{
margin-right: 2%;
}
.left{
margin-left: 2%;
}