Css Atlıkarınca doğru miktarda kayar değil

Question

Bir css atlıkarınca yapmak için bir öğretici takip ettim ama görüntüler doğru miktarda hareket etmiyor, muhtemelen muhtemelen @keyframes ile ilgili bir problem olduğunu ancak bunun ne değişeceğine emin değilim.

Jsfiddle here

@keyframes carousel{ 
    0% { left:0; } 
    11% { left:0; } 
    12.5% { left:-100%; } 
    23.5% { left:-100%; } 
    25% { left:-200%; } 
    36% { left:-200%; } 
    37.5% { left:-300%; } 
    48.5% { left:-300%; } 
    50% { left:-400%; } 
    61% { left:-400%; } 
    62.5% { left:-300%; } 
    73.5% { left:-300%; } 
    75% { left:-200%; } 
    86% { left:-200%; } 
    87.5% { left:-100%; } 
    98.5% { left:-100%; } 
    100% { left:0; } 
} 

Answer 1

Bu kuralı ekleyin:

ul { 
    margin: 0; 
    padding: 0; 
} 

Updated Fiddle