How. To Center Align. My Gallery Column Main Page In Mobile With CSS

Noticed that on the main page in my mobile view, the column is not centered. I used the following CSS code to make two columns into one.

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

Here is a picture and link to my website. 

https://www.erinncapko.com/

10 hours ago, Ziggy said:

This padding highlighted yellow is causing the problem:

Replace your code with this, I've swapped all padding to just bottom padding:

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

Hope that helps.

Yes it does! Thank you very much! 

3 hours ago, ec25 said:

Yes it does! Thank you very much! 

Great, happy to help!