Webpage in the same row pictures

May 7, 2022

I want this photos in the same row what should i change ?

I tried float left and other commands but one picture is staying in the lower right corner.

<section id="services">
<div class="container">
<div class="row wow fadeInUp">
<div class="col-md-4">
<img src="resimler/bimplus.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">BIMPLUS</h4>
<p>HNP</p>
</div>
<div class="col-md-4">
<img src="resimler/brighe.jpg" class="wow fadeInRight" height="80px">
<h4 class="wow fadeInRight delay-2s">BRIDGE</h4>
<p>HNP</p>
</div>
<div class="col-md-4">
<img src="resimler/precast.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">PRECAST</h4>
<p>HNP</p>
<div class="col-md-4">
<img src="resimler/precast.jpg" class="wow fadeInRight">
<h4 class="wow fadeInRight delay-2s">PRECAST</h4>
<p>HNP</p>
</div>
</div>    
</div>    
</section>

and style.css file i tried margin-left , float left but i couldn’t change.

#services
{
    background-color: #efefef;
    padding-top: 80px;
    padding-bottom: 80px;
}
#services .col-md-4
{
    padding: 20px;
}
#services .col-md-4 h4
{
    padding: 5px;
}
#services .col-md-4 img
{
    width: 200px;
    display: inline-block;
}
#services .col-md-4 p
{
    padding: 5px;
    text-align: justify;
}

>Solution :

You can use display: flex; to fix this issue because it’s more flexable than float, that’s an example:

<section class="services">
  <div class="service">
    <img src="service.jpg">
    <h3>Service</h3>
    <p>Service Description...</p>
  </div>
  <div class="service">
    <img src="service.jpg">
    <h3>Service</h3>
    <p>Service Description...</p>
  </div>
  <div class="service">
    <img src="service.jpg">
    <h3>Service</h3>
    <p>Service Description...</p>
  </div>
  <div class="service">
    <img src="service.jpg">
    <h3>Service</h3>
    <p>Service Description...</p>
  </div>
</section>

.services {
    display: flex;
    justify-content: space-between;
    background: #eee;
    padding: 40px;
}

.services .service {
    background: #ccc;
    padding: 10px;
}

You can read about flexbox here: https://www.w3schools.com/css/css3_flexbox.asp