Centering "Services" Blocks

Hello forum,

I am trying to figure out how I can center the services blocks in a pre-made layout. I have six total services listed. The top row is four (I don't like how big they become when changing to three per row), and I would like the bottom two to be centered under the four. They automatically align to the left and there is no built in way to change that. Any code to help this problem would be much appreciated. The website link is www.orbital.ink/services

Thanks!

@ptadams615 Would it be possible to share your site URL so I can take a look? Thanks! 

It is https://www.orbital.ink/services

@ptadams615 You can try adding this code snippet under Custom CSS panel:

@media only screen and (min-width:768px) {
	section[data-section-id="65009c332f517a728f7b09b0"] ul.user-items-list-item-container.user-items-list-simple li:nth-child(5) { 
		grid-column: 2 !important;
	}
}

That works! How could I potentially change the second row if I were to add one more service, and center the row of three?

@ptadams615 To center the row of three, you can add this code snippet:

@media only screen and (min-width:1100px) {
	section[data-section-id="65009c332f517a728f7b09b0"] ul.user-items-list-item-container.user-items-list-simple li:nth-child(n+5) {
		position:relative;
		left: 50% !important;
	} 
}
@media only screen and (min-width:768px) and (max-width:1099px) {
	section[data-section-id="65009c332f517a728f7b09b0"] ul.user-items-list-item-container.user-items-list-simple li:last-child {
		grid-column-start: 2 !important;
	}
}
@media only screen and (min-width:576px) and (max-width:767px) {
	section[data-section-id="65009c332f517a728f7b09b0"] ul.user-items-list-item-container.user-items-list-simple li:last-child {
		position: relative;
		left: 50% !important;
	}
}