I have this annoying issue with a hover overlay. On my home page I have the hover overlay set up perfectly. When you hover over the image the overlay comes up and covers 100% of the height and width.
Very simple. The padding r/l of the outer div is 10px but you set left/right to 12px. Change left and right to 10 to solve this.
Anyway, most of the time in overlays you should add “extra” div inside the col grid - then use left/right 0 and that’s it (In your code when you change the padding you get again this issue).
Like this:
column (wrapper) - padding left and right 12px (I am also relative)
— some-div-position relative - “i am the new relative parent”
----- Overlay some-div position absolute