[FIXED] How to separate two images in the same row?

Issue

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.

Solution

I solved the problem, I increased w of the container from 75 to 80, but I needed to add a new class in CSS (that would be w-80).

Answered By - the nr

Answer Checked By - Senaida (PHPFixing Volunteer)