Infinite horizontal scroll has white space at end of div

I am trying to create an animation where the div containing all of the cards slides from right to left, which I have achieved.

The problem is there is a huge white gap in between the end of the div and when it resets, I managed to fix this by specifying that at 100% the div should have translated -1110px however this causes a stutter as the carousel resets.

is there anyway I can have the animation reset back at 0% without causing a stuttering effect? Code is below

<div className="scroll-container" id="reset">
  <div className="scroll">
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
  </div>
  <div className="scroll">
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
    <Card industry="Industry" description="Description" />
  </div>
</div>

.container {
  position: relative;
}
.scroll-container {
  position: relative;
  animation: scroll 5s linear infinite;
}
.scroll {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  margin: 0.5rem 0;
  transform: translateX(82px);
}
@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-1110px);
  }
}