I am working on a section of my website and I want to align the contents inside a specific div horizontally with equal width. However, for some reason, my CSS code is not achieving the desired result.
const Reasons = ()=>{
return (
<div className="reasons" id='reasons'>
<div className="left-r">
<img src={image1} alt="" />
<img src={image2} alt="" />
<img src={image3} alt="" />
<img src={image4} alt="" />
</div>
<div className="right-r">
Right Side
</div>
</div>
)
}
The CSS code:
.Reasons{
padding: 0 2rem;
display: flex;
}
.left-r{
flex: 1 1;
flex-direction: column;
}
.right-r{
flex: 1 1;
flex-direction: column;
background-color: var(--orange);
}
Although I expected the content to be displayed flexibly in a horizontal manner, it seems to be showing up vertically instead.