Problem centering images in grid:strips gallery on mobile

site: www.havenandhomedesign.com

pass: havenandhome

In the Gallery section of my site, I am using a portfolio layout (and grid:strips specifically for the images). Initially, on mobile, it was not displaying images in a single column, but rather a mix of one and two columns. I have forced the images to display in one column using this code:

@media (max-width: 640px) {
    .gallery-strips .gallery-strips-item img {
        height: 100%!important;
        width: 100%!important;
    }
    .gallery-strips .gallery-strips-wrapper {
        columns: 1;
        column-gap: 0;
        padding: 0 0px;
        height: auto!important;
        display: block!important;
     }
    .gallery-strips-item-wrapper {
        height: auto!important;
    }
    .gallery-strips-item {
        position: relative!important;
        padding: 10px!important;
        transform: none!important;
        width: 100%!important;
        display: block;
       }
}

This fixed the problem, but it created a separate one. Now the images are not centered on the screen (the padding to the right of the image is smaller than the padding to the left, skewing the images to the right). 

How do I fix this and recenter the images? Thanks in advance for the help.

Can you try adding this property:

margin:auto;

5 hours ago, Ziggy said:

Can you try adding this property:

margin:auto;

Where in the code would I place this?

5 hours ago, djcdubz said:

Where in the code would I place this?

Within this:

.gallery-strips .gallery-strips-wrapper {
}

But I can't actually see the problem when I view your gallery page.

6 hours ago, Ziggy said:

Within this:

.gallery-strips .gallery-strips-wrapper {
}

But I can't actually see the problem when I view your gallery page.

I should have been more specific. When you click on the gallery page, look specifically at one of the projects and you'll see it there. It'll look like this:

The images are pushed up against the right side of the screen more so than the left. 

Also, tried the code, didn't change anything.

3 hours ago, jaeveedee said:

try changing

padding: 10px !important;

to this

padding: 10px 0 !important;

in your .gallery-strips-item code

Genius. This worked! Thanks.