Marquee keeps glitching

Question

I got following setup:

<div class="marquee-menu" style="overflow: hidden;">
    <div class="marquee-content-menu">
         <div class="marquee-item-menu">
             <p>Portfolio</p>
             <img src="image.webp">
         </div>
         <div class="marquee-item-menu">
             <p>Portfolio</p>
             <img src="image.webp">
         </div>
         <div class="marquee-item-menu">
            <p>Portfolio</p>
            <img src="image.webp"></div>
         <div class="marquee-item-menu">
            <p>Portfolio</p>
            <img src="image.webp">
         </div>
    </div>
</div>

And my css:

.marquee-menu {
  background-color: #242422;
  overflow: hidden;
}
.marquee-content-menu {
  display: flex;
  animation: scrollingmenu 4s linear infinite;
}
.marquee-item-menu {
  flex: 0 0 35vw;
  margin: 0;
}
.marquee-item-menu img {
  transform: translateY(20%);
  width: 80px;
  height: 80px;
  border-radius: 100%;
}
.marquee-item-menu p {
  display: inline;
  color: #fff;
  font-family: 'Zodiak';
  font-size: 64px;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: -2px;
  margin: 0 28px;
}
@keyframes scrollingmenu {
 0% { transform: translateX(0); }
 100% { transform: translateX(-51vw); }
}

What happens is that is a sort of glitch in the animation, it always jumps when to the right when finished. You can see an example on theotherconcept.be and then just click the hamburger menu.

Can anyone help to sort this glitch out?