在css中插入轮播图，结果显示图片到处乱跑，不在一个框子内

轮播图显示图片到处乱跑，不在一个框子内，这个该怎么办，想让它在页面左边。

你直接把代码贴出来

.demo{
width:400px;/图片宽度/
height:300px;
margin:0px auto;
/* background-color:aquamarine; */
overflow: hidden;/用于隐藏超出展示容器的内容部分/
}
.demo1{
width:2000px;
height:300px;
margin:0px auto;
animation:text 30s infinite linear;
font-size:0px;/消除图片间隔/

}
.demo1 img{
width:400px;
height:300px;
float:left;
}
@keyframes text { /0%-20%是播放下一个图片，0%-10%是图片暂停的时间/
0%,10%{
margin-left:0px;
}
20%,30%{
margin-left:-400px;
}
40%,50%{
margin-left:-800px;
}
60%,70%{
margin-left:-2400px;
}
80%,90%{
margin-left:-2800px;
}

}
以下是html中的