How to separate two images in the same row?

do you know how to separate two images in the same row?
Thank you so much for your help.
I will post the image under this sentence.

Image

<div id=”portfolio”>
<div class=”container-fluid w-75″>
<div class=”row”>

<div class=”col-sm-6 col-xs-12 text-center”>
<div class=”zgrade”>
<img class=”img-fluid” src=”assets/img/szgrade/zgradaA.jpg” alt=”…” />
<h2 class=”zgrade-txt” style=”color:white”> Zgrada A </h2>

</div>

</div>
<div class=”col-sm-6 col-xs-12 text-center”>
<div class=”zgrade”>
<img class=”img-fluid” src=”assets/img/szgrade/zgradaB.jpg” alt=”…” />
<h2 class=”zgrade-txt” style=”color:white”> Zgrada B </h2>
</div>
</div>
</div>
</div>
</div>

Css

.zgrade {
position: relative;

border: 1px solid #333;

overflow: hidden;
width: 745px;
}

.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);
}

.zgrade-txt {
position: absolute;
top: 250px;
left: 0;
width: 100%;

Edit: Added CSS code, I tried adding br and span in HTML code, but that didn’t help.