I have this row of three columns where I want an image in each column and for this image to take 20px margin from top, left and right. margin-right rule is having no effect on image, margin-left makes it move towards right and overlap the other column.
HTML
<div class="row">
<div class="column">
<p class="title">News</p>
<img src="https://circleyoga.com/wp-content/uploads/2023/12/Gift-Box-v2-500x300-1.jpg" alt="">
</div>
CSS
.row{
display: flex;
max-width: 1060px;
align-items: center;
justify-content: center;
margin: 0 auto;
margin-top: 30px;
box-sizing: border-box;
}
.column{
display: inline-block;
min-height: 500px;
width: 33.33%;
border: 5px solid #F8F8F8;
box-sizing: border-box;
}
.title{
font-family: 'Nunito Sans', sans-serif;
font-size: 30px;
font-weight: 100;
border-left-style: solid;
border-left-width: 5px;
border-color: #d54126;
padding-left: 13px;
margin: 10px 0px;
}
.column img{
display: block;
max-width: 100%;
height: auto;
margin: 20px 20px 0 20px;
}