Infinite horizontal scrolling animation

Hey there! Before i say anything i just want to clarify that this is the 2nd time i get in touch with web development. Anyways I recently started making a website at a place i work at and after a few days of working i am stuck. I was trying to make a scrolling animation for cards that describe the server. The video will be added below so you can see it. I have have gone thru video tutorials, text tutorials and even ai. Basically what im stuck with is that it leaves an awkward gap/empty space when it plays the animation and when the animation stops it resets and plays it back. I don't know how i could make it so it doesn't keep the empty space there but i suspect it might be something with the way i handle card positioning but it's no longer needed due to me changing minds on how i want them to be shown. If you have any more questions you're more than welcome to ask me. HTML -> https://pastebin.com/uPcGuiRk CSS -> https://pastebin.com/jyPXKxEz