Centering product image grid in Shop Fulton / 7.0

Site URL: https://www.fitbarstrong.com/ocr-ninja-warrior-equipment

Hello - I wanted to widen the viewable width of the pages on my site, desktop only, and was able to do so with the following CSS. 

/*make page wider desktop only*/
@media screen and (min-width:991px) { #page, #content {max-width: 85% !important;}
}

Works great except for the the product shop: apparently the default product categories and product images are left-aligned.  I tried various code snippets and was unable to get it center-align.  At the moment I suppressed the page width widening.   Any help is appreciated!!!

16 minutes ago, FitBar said:

Site URL: https://www.fitbarstrong.com/ocr-ninja-warrior-equipment

Hello - I wanted to widen the viewable width of the pages on my site, desktop only, and was able to do so with the following CSS. 

/*make page wider desktop only*/
@media screen and (min-width:991px) { #page, #content {max-width: 85% !important;}
}

Works great except for the the product shop: apparently the default product categories and product images are left-aligned.  I tried various code snippets and was unable to get it center-align.  At the moment I suppressed the page width widening.   Any help is appreciated!!!

Did you get it solved?

On 3/10/2021 at 6:36 PM, bangank36 said:

Did you get it solved?

Still have the issue.  I commented out the "Make page wider desktop only" code until I can figure out how to not negatively effect the product grip centering.  Thanks

@FitBar Try adding 

margin: 0 auto !important;

@tuanphan  Hi!  I tried using that before and after the above widening code and it just seems to override the widening code.  For now I am going to leave it as is since the majority of the traffic of course is mobile.  Thanks for trying tho!