Ребят помогите пофиксить а то в css не очень, короче нарисовал картинку по ширине слайдера но все ровно криво

вот код

.slider {

padding: 0;
margin: 0;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
max-width: 1000px;

}

.slider ul {
width: 1000%;
height: auto;
position: relative;
list-style: none;
left: 0;
margin: 0;
padding: 0;
line-height: 0;
-moz-animation:slide-animation 15s infinite;
-webkit-animation:slide-animation 15s infinite;
}

.slider ul:hover {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}

.slider li {
width: 10%;
list-style: none;
float: left;
margin: 0;
padding: 0;
}

img {
max-width: 100%;

}

span {
position: relative;
height: 50px;
display: block;
font-size: 0.8em;
bottom: 0;
padding: 0.5px 20px 0px 20px;
margin-top: -50px;
overflow: hidden;
background-color:rgba(54,44,48,0.6);
color: #fcfcfc;
text-shadow: 0px 1px 1px #9d9d9d;
font-weight: normal;

}

Изображение

------
63602_Screenshot_31.png (787.4 Kb)
Скачиваний: 76

когда слайдер перелистывает то получается такая фигня

Изображение

------
63603_Screenshot_32.png (784.0 Kb)
Скачиваний: 86

а хтмл?

Пробуй изменить этот клас
span {
position: relative;
height: 50px;
display: block;
font-size: 0.8em;
bottom: 0;
padding: 0px 20px 0px 20px;/*Здесь изменить*/
margin-top: -50px;
overflow: hidden;
background-color:rgba(54,44,48,0.6);
color: #fcfcfc;
text-shadow: 0px 1px 1px #9d9d9d;
font-weight: normal;

}
________
посл. ред. 09.04.2019 в 09:14; всего 1 раз(а); by desay

менял и 0 результата(

Может в этом дело?

@-webkit-keyframes slide-animation {
1% {left: 0%; opacity: 1;}
18% {left: 0%; opacity: 1}
19% {opacity: 0.2;}
20% {left: -100%; opacity: 1;}
58% {left: -100%; opacity: 1;}
59% {opacity: 0.2;}
60% {left: -200%; opacity: 1;}
98% {left: -200%; opacity: 1;}
99% {opacity: 0.5;}
100% {left: 0%;}
}

@-moz-keyframes slide-animation {
1% {left: 0%; opacity: 1;}
18% {left: 0%; opacity: 1}
19% {opacity: 0.2;}
20% {left: -100%; opacity: 1;}
58% {left: -100%; opacity: 1;}
59% {opacity: 0.2;}
60% {left: -200%; opacity: 1;}
98% {left: -200%; opacity: 1;}
99% {opacity: 0.5;}
100% {left: 0%;}
}

.slider ul {
width: 1000%; тут именно тысяча? нет ошибки?