CSS слайдер изображения (изображения не остаются в одном положении)?

Question

Я сделал небольшой слайд слайдера CSS для своей веб-страницы, но у меня есть несколько проблем с моими изображениями (изображения в слайдере). Позиции изображений различаются на экране (хотя я сделал, чтобы изображения были одинакового размера перед загрузкой).

Первое изображение слайдера слишком велико (поскольку между заголовком и изображением нет зазора). Второе изображение работает нормально, третье изображение ниже второго и первого изображений? Мой веб-страницы можно увидеть на codepen.io (http://codepen.io/aaron_1986/pen/dGdqvx)

@keyframes slider { 

0% { 
    left: 0; 
    } 

20% { 
    left: 0; 
    } 

25% { 
    left: -100%; 
    } 

45% { 
    left: -100%; 
    } 

50% { 
    left: -200%; 
    } 

70% { 
    left: -200%; 
    } 

75% { 
    left: -300%; 
    } 

95% { 
    left: -300%; 
    } 

100% { 
    left: -400%; 
    } 
    } 

#slider { 
overflow: hidden; 
    } 

    #slider figure img { 
    width: 20%; 
    float: left; 
    } 

    #slider figure { 
    position: relative; 
    width: 500%; 
    margin: 0; 
    left: 0; 
    text-align: left; 
    font-size: 0; 
    animation: 30s slider infinite; 

    } 
     } 

Answer 1

Я думаю, что <li> элементы все еще имеющие list-style. Это все еще не совершенно, но я добавил list-style: none ваших <li> элементов, удерживающих изображения (я также переделана шириной изображения), и они остаются выровненным: codepen.io/anon/pen/gPejEJ

#slider figure li { 
list-style: none; 
} 
#slider figure img { 
width: 33.33%; 
float: left; 
}