Images on logo carousel overlapping. Works with text blocks but not images

Question

https://jsfiddle.net/youazs87/13/ This is what I am trying to accomplish. Its not a fully seamless infinite loop but its smooth enough that the slight reset is not significant enough to look bad. However, when I try the same thing with the code below replacing simply the HTML blocks of text with images, everything just overlaps. But it resets at a good enough time that it would work if the items weren't overlapping. You can see when the final image of the slideshow is done, it immediately resets to a new one with the same placement of the last final image.

https://gyazo.com/a5898bfc212a33a6a7e4b2d854ce696a

    <div class="logos">
        <div class="logos-slider">
            <div class="logos-slide">
                <img src="{{ site.baseurl }}/assets/logos/amazon-dynamodb-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/amazon-rds-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/amazon-redshift-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/amazon-s3.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/apache-hbase-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/apache-kafka.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/apache-zookeper-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/aws-developer-tools.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/aws.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/azure-blob-storage.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/azure-cosmos-db-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/azure-data-lake-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/azure-devops-logo-vertical.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/azure-full.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/azure-sql-database-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/azure-synapse-analytics-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/cassandra.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/digital-ocean.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/google-cloud-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/google-cloud-sql-1.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/hadoop-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/hive.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/ms-dynamics-365.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/ms-sql.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/mysql.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/oracle.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/postgresql-vertical-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/power-bi-2020.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/python_1.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/r_logo.svg "/>
                <img src="{{ site.baseurl }}/assets/logos/rackspace-horizontal.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/salesforce.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/spark.svg"/>
            </div>

            <div class="logos-slide">
                <img src="{{ site.baseurl }}/assets/logos/amazon-dynamodb-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/amazon-rds-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/amazon-redshift-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/amazon-s3.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/apache-hbase-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/apache-kafka.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/apache-zookeper-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/aws-developer-tools.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/aws.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/azure-blob-storage.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/azure-cosmos-db-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/azure-data-lake-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/azure-devops-logo-vertical.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/azure-full.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/azure-sql-database-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/azure-synapse-analytics-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/cassandra.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/digital-ocean.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/google-cloud-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/google-cloud-sql-1.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/hadoop-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/hive.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/ms-dynamics-365.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/ms-sql.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/mysql.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/oracle.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/postgresql-vertical-logo.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/power-bi-2020.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/python_1.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/r_logo.svg "/>
                <img src="{{ site.baseurl }}/assets/logos/rackspace-horizontal.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/salesforce.svg"/>
                <img src="{{ site.baseurl }}/assets/logos/spark.svg"/>
            </div> 
        </div> 
    </div>

.logos {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logos-slider {
  width: 1000px;
  height: 100px;
  position: relative;
  background: white;
  box-shadow: 0 10px 20px -10px rgba(0,0,0,0.2);
  display: flex;
  overflow: hidden;
}

.logos-slide {
  height: 100px;
  display: flex;
  align-items: center;
  animation: carousel 15s linear infinite;
}

.logos-slide img {
  height: 70px;
  width: 200px;
  padding: 0 30px 0 30px;
}

.logos:hover .logos-slide {
  animation-play-state: paused;
}

@keyframes carousel {
  0% {transform: translateX(0);}
  100% {transform: translateX(-100%);}
}

The solution I tried was adding padding to the images which actually fixed the overlapping issue and creates a seamless infinite carousel but then the padding causes the image to become extremely small/not visible. https://gyazo.com/6f5e162fc0c99c4bbe2fdb4c3d3a3dd8

.logos-slide img {
  border-style: solid;
  border-color: black;
  height: 70px;
  width: 200px;
  padding: 0 100px 0 100px;
}