Centre Aligning a Simple List's bottom elements

I'm wondering if someone can help me. I have 7 pieces of content in a simple list as seen in the screenshot but I wan for the bottom 3 to be centred on the page. Is it possible to do this with code as I have tried many examples and none have worked.

Can you share link to this page? We can check easier

It is an unpublished page currently, but link: https://ellipsoid-brass-hh4r.squarespace.com/team

23 hours ago, NickG159 said:

It is an unpublished page currently, but link: https://ellipsoid-brass-hh4r.squarespace.com/team

The site is private, you can follow this

HI, the password is now set: CeresPass1!

18 hours ago, NickG159 said:

HI, the password is now set: CeresPass1!

I don't see problem on Team page. Can you check it again?

My apologies, the problem is on the home page.

https://ellipsoid-brass-hh4r.squarespace.com/config/

20 hours ago, NickG159 said:

My apologies, the problem is on the home page.

 

https://ellipsoid-brass-hh4r.squarespace.com/config/

Use this code to Website > Website Tools > Custom CSS

@media screen and (min-width:992px) {
.user-items-list-item-container[data-section-id="65c6423c3677b734f5593cf5"] li:nth-child(n+5) {
    position: relative;
    left: calc(~"50% + 25px");
}
}

Thank you so much, that worked perfect!

Hey, I've had to add another item to the list and now the bottom row of 4 is off centre.  Can you tell me how to fix this?

On 3/6/2024 at 7:56 PM, NickG159 said:

Hey, I've had to add another item to the list and now the bottom row of 4 is off centre.  Can you tell me how to fix this?

 

Just remove code I sent.

My code will move items 5, 6, 7, 8...

so you can remove code, or change n+5 to n+9

Thank you. Can I also ask for your help on this.

I used code injection and custom css to allow for a drop down on this simple list. It works fine for desktop, but it is completely messed up when I change to mobile version. Can you help me with the layout of this on mobile?

You can use this code to Custom CSS box

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="65e86a914d9dc22172f5a3a5"] {
    grid-gap: 5px 5px !important;
    flex-wrap: wrap !important;
}
.user-items-list-item-container[data-section-id="65e86a914d9dc22172f5a3a5"] li {
    width: 50% !important;
    flex: unset !important;
}
}