How do I horizontally align images? (CSS and HTML) - html

Question

I am seeking to make a drivers' page. In the desktop view, I would like my images to be next to each other horizontally. Right now, they are vertically aligned.
I have tried changing the display attribute, but it didn't turn out great. The closed thing I have done using the grid display.
I am still fairly new to this. So any help rendered will be appreciated. Thanks!
Here is what my code looks like;
Html Code:
<div class="drivers-container">
<div class="driver-row">
<!--Drivers from Spain-->
<h2><a id="spain" href="#spain">Spain</a></h2>
<div class="image2">
<img src="Drivers/EFREN LLARENA (Spain) 2.jpg" alt="Efren Llarena" width="500">
<div class="details">
<h2><span>Efren Llarena</span></h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt explicabo perferendis mollitia iste libero magni ab! Ipsam id beatae nesciunt?.</p>
</div>
</div>
<div class="image2">
<img src="Drivers/Sara Fernandez (Spain).jpg" alt="Sara Fernandez" width="500" height="400">
<div class="details">
<h2><span>Sara Fernandez</span></h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt explicabo perferendis mollitia iste libero magni ab! Ipsam id beatae nesciunt?.</p>
</div>
</div>
</div>
Sara Fernandez (Spain)
Efren-Llarena (Spain)
CSS Code;
.driver-row h2 a{
color: #fff;
text-decoration: none;
font-size: 70px;
font-weight: 300;
}
.drivers-container{
margin: 30px;
}
.driver-row{
width: 100%;
display: grid;
justify-content: center;
flex-wrap: wrap;
}
.image2{
background: #000000;
position: relative;
flex: 1;
max-width: 460px;
height: 300px;
margin: 20px;
overflow: hidden;
}
.image2 img{
opacity: 0.8;
position: relative;
vertical-align: top;
transition: 0.6s;
transition-property: opacity;
}
.image2:hover img{
opacity: 1;
}
.image2 .details{
z-index: 1;
position: absolute;
top: 0;
right: 0;
color: rgb(0, 0, 0);
width: 100%;
height: 100%;
}
.image2 .details h2{
text-align: center;
font-size: 35px;
text-transform: uppercase;
font-weight: 300;
margin-top: 70px;
transition: 0.4s;
transition-property: transform;
}
.image2 .details h2 span{
font-weight: 900;
}
.image2:hover .details h2{
transform: translateY(-30px);
}
.image2 .details p{
margin: 30px 30px 0 30px;
font-size: 18px;
font-weight: 600;
text-align: center;
opacity: 0;
transition: 0.6s;
transition-property: opacity,transform;
}
.image2:hover .details p{
opacity: 1;
transform: translateY(-40px);
}

Answer 1

i recommend you to extract heading and extra stuff from the driver-container
<div class="drivers-container">
<h2>
<a id="spain" href="#spain">Spain</a>
</h2>
<div class="driver-row">
<div class="image2">
<img src="Drivers/EFREN LLARENA (Spain) 2.jpg" alt="Efren Llarena" width="500">
<div class="details">
<h2><span>Efren Llarena</span></h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt explicabo perferendis mollitia iste libero magni ab! Ipsam id beatae nesciunt?.</p>
</div>
</div>
<div class="image2">
<img src="Drivers/Sara Fernandez (Spain).jpg" alt="Sara Fernandez" width="500" height="400">
<div class="details">
<h2><span>Sara Fernandez</span></h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt explicabo perferendis mollitia iste libero magni ab! Ipsam id beatae nesciunt?.</p>
</div>
</div>
</div>
now for your css I'll only write down necessary rules, add your own designs later
.driver-row{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.image2{
width: 50%;
box-sizing: border-box;
padding: 20px;
position: relative ;
}
.image2 img{
width:100%;
height: 400px;
object-fit: cover;
}
.image2. details{
position: absolute ;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
it is using flexbox only.