Margin-bottom not working for image elements - html

Question

The divs inside mini_projects_11 are all attached to each other, but I am providing margin-bottom. I've tried attaching margin to 'a' and also assigning 'a' display:block, but still isn't working.
style.scss
#mini_projects {
background-color: rgba(0,0,0,.85);
grid-column: 1/4;
grid-row: 1/7;
height: 100vh;
width: 100vw;
&1{
display: grid;
height: 100vh;
width: 100vw;
grid-template-columns: 20% 60% 20%;
grid-template-rows: 20% 60% 20%;
background-color: $mainDOrange;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
&1{
grid-column: 2/3;
grid-row: 2/3;
overflow-x: hidden;
overflow-y: scroll;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 40% 40%;
grid-auto-rows: 40%;
div{
justify-self: center;
height: 100%;
width: 90%;
margin-bottom:5rem; (NOT WORKING)
text-align: center;
a{
text-decoration: none;
display: block;
img{
width: 100%;
height: 100%;
border-radius: 50%;
}
span{
z-index: 1;
display: block;
color: white;
font-size: 2.5rem;
transform: translate(0rem,5rem);
}
}
}
}
}
}
#mini_projects {
background-color: rgba(0, 0, 0, .85);
grid-column: 0.25;
grid-row: 0.1428571429;
height: 100vh;
width: 100vw;
}
#mini_projects1 {
display: grid;
height: 100vh;
width: 100vw;
grid-template-columns: 20% 60% 20%;
grid-template-rows: 20% 60% 20%;
background-color: orange;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
#mini_projects11 {
grid-column: 0.6666666667;
grid-row: 0.6666666667;
overflow-x: hidden;
overflow-y: scroll;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 40% 40%;
grid-auto-rows: 40%;
}
#mini_projects11 div {
justify-self: center;
height: 100%;
width: 90%;
margin-bottom: 5rem;
/* (NOT WORKING) */
text-align: center;
}
#mini_projects11 div a {
text-decoration: none;
display: block;
}
#mini_projects11 div a img {
width: 100%;
height: 100%;
border-radius: 50%;
}
#mini_projects11 div a span {
z-index: 1;
display: block;
color: white;
font-size: 2.5rem;
transform: translate(0rem, 5rem);
}
<div id="mini_projects">
<div id="mini_projects1">
<div id="mini_projects11">
<div id="omnifood"><span>Omnifood</span><img src="img/omnifood.png" alt=""></div>
<div id="natours"><span>Natours</span><img src="img/natours.png" alt=""></div>
<div id="nexter"><span>Nexter</span><img src="img/nexter.png" alt=""></div>
<div id="trillo"><span>Trillo</span><img src="img/trillo.png" alt=""></div>
</div>
</div>

Answer 1

nevermind, I just fixed it with row-gap in #main_projects_11 .
row-gap:2rem;