Border Appearing on elements in drag and drop

I am creating a drag and drop activity where students are supposed to drag a colored blue rectangle to complete coloring a given fraction strip. I made sure that the blue rectangle and the drop zones have the same size (screenshot 1). However, whenever I select the drop zones for my element, a transparent border is appearing around my element which is changing the size of the element (the blue rectangle). This border is creating issue whenever dropping the element in its drop zone, check attached screenshot 2.

For a current solution, I had to resize the drop zones as the "new" size of the element (the rectangle with its transparent border) and I had to move my drop zone above and before the actual place where it supposed to be, so when users actually drop it, it would appear exactly where it should be (check screenshot 3).

Here is the link of the H5P https://h5p.org/node/1416825
The first activity demonstrates the issue and the second demonstrates my temporary solution. For both activities, I kept the drop zone highlighting when dragging for you to see the issue I am referring too.

I hope someone could help me with a better solution.
If not, I hope that my temporary solution could be beneficial to anyone else.