Enemy explosion offSet is displaced away from desired point of origin

In the game, when the enemy is hit and explodes the explosion animation appears offset to the bottom right corner of the dead enemy’s center point.

I ran tests to adjust the explosion positioning with no luck. The debugger says that “this.offSet.y” & “this.offSet.x” are -100. I can’t seem to know how to adjust that as well.

Image example:

enter image description here

Here are the code snippets & CSS for bonus:

Explosion JS

class Explosions {     constructor (assetName) {         this.count = 0;         this.offSet = undefined;         this.setOffSet(assetName);      }      setOffSet(assetName) {         let asset = GameManager.assets[assetName];         this.offSet = new Point ((asset.width/2)*-1, (asset.height/2)*-1);     }  createExplosion(position) {     let div = document.createElement("div");         div.classList.add("explosion");         let divId = 'explosion_' + this.count;         div.id = divId;         console.log(position);         div.style.left = (position.x + this.offSet.x) + 'px';         div.style.top = (position.y  + this.offSet.y) + 'px';         $  (GameSettings.gameAreaDiv).append(div);         setTimeout(function() {             $  ('#' + divId).remove();         }, GameSettings.explosionTimeout);          this.count++; }  } 

Explosion CSS

@keyframes explosion {     0%   {background-image: url("../../assets/explosion/smallexplode1.png");}     10%   {background-image: url("../../assets/explosion/smallexplode2.png"); }     20%   {background-image: url("../../assets/explosion/smallexplode3.png"); }     30%   {background-image: url("../../assets/explosion/smallexplode4.png"); }     40%   {background-image: url("../../assets/explosion/smallexplode5.png");}     60%   {background-image: url("../../assets/explosion/smallexplode6.png");opacity: 0.9;}     80%   {background-image: url("../../assets/explosion/smallexplode7.png");opacity: 0.8;}     90%   {background-image: url("../../assets/explosion/smallexplode8.png");opacity: 0.5;}     100%   {background-image: url("../../assets/explosion/smallexplode9.png");opacity: 0.3;} }  .explosion {   width: 100px;   height: 100px;   position: absolute;   left: 500px;   top: 300px;   animation-name: explosion;   animation-duration: 0.8s;   background-repeat: no-repeat;   z-index: 20; } 

Any indication what the cause is?

Let me know if there are any other snippets that needs adding, and if you can please be patient with me since I’m student programmer that is still learning.

Thank you