Html CSS图像滑块（图像不会停留在同一位置）？

我已经为我的网页制作了一个小的CSS图像滑块，但是我的图像（滑块中的图像）有一些问题。图像在屏幕上的位置不同（尽管我在上传之前已经确保图像大小相同）

滑块的第一个图像太高（因为标题和图像之间没有间隙）。第二个图像工作正常，第三个图像低于第二个和第一个图像？我的网页可以在codepen.io（）上看到

---

我猜

元素仍然具有

列表样式。它仍然不完美，但我在保存图像的
元素中添加了
列表样式：none
（我还调整了图像宽度），它们保持对齐：codepen.io/anon/pen/gPejEJ

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

谢谢你的帮助：）我可以贪婪地问一下如何降低主图像（这样图像和标题之间就有一个间隙）？而且，再一次向你表示衷心的感谢！！啊，很抱歉，在你回复之前，我把我的评论移到了你身上。我刚刚给你的
#slider
div添加了一个边距，这就是你的意思吗？：谢谢。这个网页太完美了！没问题，很高兴我能帮忙！如果我的答案都是好的，你想批准吗？
#slider figure li {
 list-style: none;
}
#slider figure img {
 width: 33.33%;
 float: left;
}