Hyde: Add Padding to product pages?

Site URL: https://www.beachlovejewelry.com/shop

Hello, 

trying to add side padding to the products page of Hyde template. It seems Hyde doesn't allow side padding adjustments at all unless css? If you can tell by the image, products butt up all the way to the edges and I would like to add some space to those sides. please help! 

Padding left/right of page or padding between products?

If page, add this to Design > Custom CSS

.ProductList-grid {
    margin: 0 -2vw -2vw 0;
}

Yes to the left/right of the page!

I tried the code, but whenever I adjust numbers it makes the product grid off center. Which numbers do I adjust to add equal padding to the left & right, keeping it centered? 

THank you! 

adjust -2 & -2

I inserted the code and adjusted the -2, -2 to -10 and -10 and it didn't change anything... the original code did not change anything either. Not sure whats going on there 

Remove above & Add new code

@media screen and (min-width:641px) {
.ProductList-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    width: 90% !important;
    margin: 0 auto !important;
    clear: none !important;
    grid-column-gap: 10px;
}
.ProductList-item {
    width: 100% !important;
    clear: none !important;
    float: none !important;
    margin: 0 !important;
}
}

Edit 90% to any value what you want