How can I close this gap between images/col?

guys may you please tell me how to close this gap between images/col?
I want to be closer to each other, I tried using offset-2 and offset-1, but that didn’t give me good results. Thank you so much for your help, I really appreciate it. I will upload the picture now and post it under this sentence.

Image

HTML

<div class=”col-md-6 ” >

<div class=”zgrade”>
<img class=”img-fluid” src=”assets/img/szgrade/zgradaA.jpg” alt=”…” />

</div>

<br>
<br>

</div>
<div class=”col-md-6 ” >
<div class=”zgrade”>
<img class=”img-fluid” src=”assets/img/szgrade/zgradaB.jpg” alt=”…”/>

</div>
</div>

</div>
</div>

<br>
<br>

<div class=”row no-gutters”>

<div class=”col-md-6 ” >
<div class=”zgrade”>
<img class=”img-fluid” src=”assets/img/szgrade/zgradaC.jpg” alt=”…” />

</div>

<br>
<br>

</div>
<div class=”col-md-6 “>
<div class=”zgrade”>
<img class=”img-fluid” src=”assets/img/szgrade/zgradaD.jpg” alt=”…”/>

</div>
</div>

</div>
</div>

<br>
<be>

CSS

.zgrade {
position: relative;
max-width: 80%;

margin-left: auto;
margin-right: auto;
overflow: hidden;
width: 745px;
min-width: 466px;
}

.zgradeimg {
width: 500px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.4s ease-in-out;
}
.zgrade:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}