Locating 5 row of grid at the center (with picture) - html

Question

I am using Next.js and SCSS and trying to locate 5 & 3 rows of images at the center of the page with responsive grid system.
I just need to slightly adjust images location to the right side but contents do not move at all.
here is the code :
Next.js
// So basically ui.container wraps up li.item which are images.
<ul className="container">
{stores.map(store => (
<li onClick={this.open} key={store.id} className="item">
<img
src={store.thumb}
onClick={() => this.storeDetail(store.id)}
/>
</li>
))}
</ul>
SCSS
section {
background: pink;
}
.store-list-title {
text-align: center;
padding-top: 2rem;
font-size: 3rem;
}
.container {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(5, 200px);
}

Answer 1

Add justify-content:center for aligining center
.container {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(5, 50px);
justify-content: center;
}

Answer 2

So the solution I found on youtube is using mixin function in SCSS.
It needs calculation so I am still looking at it to understand how it works.
I would be appreciated if someone explains how it works
item element and mixin
#mixin grid($cols, $mgn) {
float: left;
margin-right: $mgn;
margin-bottom: $mgn;
width: ((100% - (($cols - 1) * $mgn)) / $cols);
&:nth-child(#{$cols}n) {
margin-right: 0;
}
}
.item {
#include grid(5, 2%);
img {
width: 100%;
}
}
li tags
{stores.map(store => (
<li onClick={this.open} key={store.id} className="item">
<img
src={store.thumb}
onClick={() => this.storeDetail(store.id)}
alt={`${store.name} image`}
/>
</li>
))}