hover state mismatched alignment - Flatiron Template

Site URL: https://www.rafaelmfvo.com

Hi forum,

I'm using the custom CSS below to add space between my images on my Index Page gallery using the Flatiron template. It works as I want it to but I want the Hover State dark grey box to match the border on all four sides - right now the right side is much thinner than the others. I added screenshots for visualization - Any ideas on how to fix?

/* Flatiron: Add 8px white space between index items */
/* set the white space on each side of page */
#container-content {
   padding-left: 8px!important;
   padding-right: 8px!important;
}
#grid .item {
 margin-left:-8px;
 a {
   border: 16px solid #fff;
   }
 /* Overlay size on hover */
 .wrapper {
   margin: 16px;
 }
}
#grid .item {
    padding: 20px !important;
    box-sizing: border-box;
}

I think this is not possible. You can consider some other effect, eg: change image opacity on hover, invert image color,...