Why is my Gap property in SCSS not working? - css

Question

I'm trying to put a gap on these icons to look appealing however it does not work. Which line did I go wrong with it? I've tried putting gap:20px; on both navlinks and icon divs still no changes.
Here's my SCSS
.navbar-container{
background-color:$color--navyblue;
width: 105px;
height: 100vh;
border-right: solid white 2px;
}
.SysDev-Logo{
margin: 0;
padding: 20px 25px;
}
.navlinks{
margin: 0;
justify-items: center;
align-items: center;
padding: 0px 25px;
.icon{
list-style: none;
cursor: pointer;
}
}
And my nextjs
<div className={styles['navbar-container']}>
<div className="container-wrapper">
<div className="Logo-wrapper">
<div className={styles['SysDev-Logo']}>
<Image
src="/img/SysDev LogoType.png"
width="50"
height="45"
objectFit="contain"
draggable="false"
/>
</div>
</div>
<ul className={styles['navlinks']}>
<li className={[styles['icon'], styles['icon--home']].join(' ')}>
<Image
src="/img/home.svg"
width="50"
height="50"
objectFit="contain"
draggable="false"
/>
</li>
</div>