I am trying to implement CSGO like case opener code on my website. Code can be found here: https://codepen.io/killerek/pen/ObBOJE

I am trying to make it responsive on all screens (full width and centered), but when I resize the window or open it on a mobile device, the red arrow is not in the center. After changing the CSS of the arrow-down class to margin-left:50%; and after centering the cardList class with full screen width: "width: 100%; margin: auto;" 2 problems arise:

1. After resizing the window, the red arrow is always centered (correct behaviour) but the items in the cardList are not moving (even if the arrow would be pointing at the won item, the arrow is moving, but not the item)

2. Now the arrow is not pointing at the right item, it has something to do with this code:

$('.card').first().animate({ marginLeft: -rand }, 5000, timing, function(){ ... }

The spin is animated based on the generated random reward, but I dont know what value to put there in order for it to work.. I am guessing the marginLeft should be changed in % values instead.

I would like to ask for help in this matter.