css code prevents a 1:1 image from filling the thumbnail box for a folder - SOLVED

AceCo55

I have this code to put a white border and drop shadow on my folder thumbnails:

/* stroke and drop shadow for folders */
.sm-user-ui .sm-tiles .sm-tile-content {
border: 2px solid #ffffff;
border-radius:1px;
max-width: 90%;
box-shadow: 10px 12px 6px -4px #000000;
}

It turns out that the "max-width:90%" causes a square image not to fill the thumbnail box

If I change it to 100% (or delete the code) the image fills the thumbnail box ... but the folder thumbnails have no space between them.

I really want to create square custom images for my folder thumbnails ...
Is it possible to create some space between the folder thumbnails and STILL have the border and drop-shadow?
(Alternatively, I can live without the border and drop shadow but I would still like some separation between the thumbnails if that is possible)

thank you very much
acecootephotography.com

AceCo55

SOLVED! For those people that might come across this thread.
In customize > select the "Folders, Galleries & Pages" content block > go to the display tab > then you can change the amount of spacing (mine WAS on "no spacing" but I now have it set to 12px)

I then altered my code from this ...
/* stroke and drop shadow for folders */
.sm-user-ui .sm-tiles .sm-tile-content {
border: 2px solid #ffffff;
border-radius:1px;
max-width: 90%;
box-shadow: 10px 12px 6px -4px #000000;
}

to this ... (the 100% max width was the real solution. The other changes were just fiddling with the shadow)
/* stroke and drop shadow for folders */
.sm-user-ui .sm-tiles .sm-tile-content {
border: 2px solid #ffffff;
border-radius:1px;
max-width: 100%;
box-shadow: 6px 8px 8px 0px #000000;
}

The box shadow parameters are explained here:
https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

So I learned something today and maybe some-one will benefit the solution