Margin-bottom not working for image elements

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"><a href=""><span>Omnifood</span><img src="img/omnifood.png" alt=""></a></div>
      <div id="natours"><a href=""><span>Natours</span><img src="img/natours.png" alt=""></a></div>
      <div id="nexter"><a href=""><span>Nexter</span><img src="img/nexter.png" alt=""></a></div>
      <div id="trillo"><a href=""><span>Trillo</span><img src="img/trillo.png" alt=""></a></div>
    </div>
  </div>

Answer 1

nevermind, I just fixed it with row-gap in #main_projects_11 .

row-gap:2rem;