How to set three images horizontal in php - html

Question

I am trying to set three images in horizontal but the images always comes out vertically
I have took reference from internet but still I cant solve this problem can someone please help me how to set it horizontally
.categories{
margin: 70px 0;
}
.col-3{
flex-basis: 30%;
min-width: 250px;
margin-bottom: 30px;
}
.col-3 img{
width: 100%;
}
.small-container{
max-width: 1080px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
<div class="categories">
<div class="small-container">
<div class="row">
<div class="col-3">
<img src="assets/offer.jpg">
<div class="col-3">
<img src="assets/offer2.jpg">
<div class="col-3">
<img src="assets/offer3.jpg">
</div>
</div>

Answer 1

if you are not using Bootstrap try this code
.categories{
margin: 70px 0;
}
.col-3{
flex-basis: 30%;
min-width: 250px;
margin-bottom: 30px;
}
.col-3 img{
width: 100%;
}
.small-container{
max-width: 1080px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.row{
flex-direction: row!important;
display:flex;
}
<div class="categories">
<div class="small-container">
<div class="row">
<div class="col-3">
<img src="assets/offer.jpg">
</div>
<div class="col-3">
<img src="assets/offer2.jpg">
</div>
<div class="col-3">
<img src="assets/offer3.jpg">
</div>
</div>
</div>
</div>
I list out some changes in your code
Close Every Divisions <div></div>
add row class like this
.row{
flex-direction: row!important;
display:flex;
}
if you are using bootstrap
Close Every Divisions <div></div>
add class in your HTML d-flex flex-row
like this
<div class="categories">
<div class="small-container">
<div class="d-flex flex-row">
<div class="col-3">
<img src="assets/offer.jpg">
</div>
<div class="col-3">
<img src="assets/offer2.jpg">
</div>
<div class="col-3">
<img src="assets/offer3.jpg">
</div>
</div>
</div>
</div>

Answer 2

The problem: I see you have used the flex-basis property. This property belongs to Flexbox and only works with Flex elements.
The solution:
You need to make .row a flex container like so:
.row {
display: flex;
}
By the way, your 2nd and 3rd col-3 don't have an ending tag. Please close them using an ending tag.
Some resources to learn Flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexboxfroggy.com