How to make dynamic collection list move to center page? (Empire theme)

[BoveSpring]

Hi!

I have a problem with a collection list. The usual setting was for 4 items showing on the top of the page, but right now we want to show only 3 items, and now it has empty space on the right side.

Do you have any idea on how to move those 3 items to the center, make it even on both sides, so it doesn't look too much empty on the right side?

Here's the URL: https://bove.co/collections/homepage-play 

Thanks!

[Zworthkey]

Hii, @BoveSpring 
Do you want to like this?

Thank You.

[BoveSpring]

Hi @Zworthkey 

Actually I want to make them more in the middle of the page, so the empty spaces will be even on both sides.

[Zworthkey · Accepted solution]

Hii, @BoveSpring 
Paste this code on to[p of the theme.scss file.

@media screen and (min-width: 860px){
ul.home-section--content.collection-list--inner {
    margin-left: 22% !important;
}
}

Thank You.

[BoveSpring]

Hi @Zworthkey 

The codes worked!

But after I checked our homepage https://bove.co/, the collection list on top of the page was moved to the right. 

FYI we have this installed on the bottom of the theme.scss file actually

@media screen and (min-width: 860px){
#shopify-section-1599186920696 .home-section--content {
    margin-top: 1.75rem;
    text-align: center;
    justify-content: center;
    display: flex;
}
}

We put it there previously to make the collection list displayed in middle in the top of the homepage, thinking it will affect other pages as well if we have less than 4 items.

Apparently not.

Is there any way that we can have one set of code to tackle this issue?

[Zworthkey]

@BoveSpring 
Remove  the code which I have given you so,
I can solve it.
Thank You.