So I've been trying to make this simple web page and for displaying the img i used display inline,inline block, flex but I can't get the img in a single row
Code snippet
Html
<div class="products">
<div class="box">
<img src="https://cdn.pixabay.com/photo/2023/06/01/06/21/perfume-8032808_640.jpg" width="200px" height="200px" >
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsum at fuga reprehenderit, iure aspernatur facilis molestias quaerat nulla vero.</p>
</div>
</div>
<div class="products">
<div class="box">
<img src="https://images.pexels.com/photos/965989/pexels-photo-965989.jpeg?auto=compress&cs=tinysrgb&w=600" width="200px" height="200px">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsum at fuga reprehenderit, iure aspernatur facilis molestias quaerat nulla vero.</p>
</div>
</div>
<div class="products">
<div class="box">
<img src="https://images.pexels.lcom/photos/1190829/pexels-photo-1190829.jpeg?auto=compress&cs=tinysrgb&w=600" width="200px" height="200px">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsum at fuga reprehenderit, iure aspernatur facilis molestias quaerat nulla vero.</p>
</div>
</div>
Css
.box{
border-color: black;
border-width: 2px;
border-style: solid;
display:inline-block;
width: 200px;
}
