[Résolu] Décalage des images dans mon diaporama

Bonjour tout le monde !

Je viens de créer un diaporama qui est génial ! Mais par contre, je ne comprend pas pourquoi, les photos apparaissent les unes en dessous des autres.

Mon diaporama est fait mais lorsque les images défilent, la 1ere photo apparaît normalement, mais les suivantes, sont décalées vers le bas, et je n'arrive pas à savoir pourquoi !

Merci de votre aide, je vous met mon code HTML et mon CSS si vous arrivez à comprend d'où vient mon erreur

<div align="center">
  <div class="contener_slideshow">
     <div class="contener_slide">
          <div class="slid_1"><img src="/Files/124048/Img/17/3-Tables-et-fleurs-Poppy-Giant-Aparte-.png" alt="Poppy giant fleurs" width="710"  height="511">
          
          <div class="slid_2"><img src="/Files/124048/Img/08/Centre-de-table-fleurs-Poppy-XL-purple-and-white-Aparte-.jpg "  alt="centre de table avec des fleurs Poppy XL " width="710" height="511">
         
          <div class="slid_3"><img src="/Files/124048/Img/24/Set-flowers-white-and-small-flowers-L-Aparte-.jpg " alt="small and large flowers" width="710" height="511">
          </div> 
</div>
</section>

 .contener_slideshow
{
  width:710px;
  height:511px;
  overflow: hidden;
  position: relative;
  background-image: url(YOUR-URL-IMAGE.png);
}
.slid_1, .slid_2, .slid_3
{
  position: absolute;
  width:710px;
  height:511px;
}
.slid_1{left: 0;}
.slid_2{left: 710px;}
.slid_3{left: 1220px;}
.contener_slide
{
  width: 710px;
  height: 511px;
  left:0px;
  position: absolute;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-name: anim_slide;
  -moz-animation-duration: 10s;
  -moz-animation-iteration-count:infinite;
-moz-animation-name: anim_slide;
  -ms-animation-duration: 10s;
  -ms-animation-iteration-count:infinite;
  -ms-animation-name: anim_slide;
  animation-duration: 10s;
  animation-iteration-count:infinite;
  animation-name: anim_slide;
}
@-webkit-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-710px;}
  45% {left:-710px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}
@-moz-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-710px;}
  45% {left:-710px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}
@-ms-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
 33% {left:-710px;}
  45% {left:-710px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}
@keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-710px;}
  45% {left:-710px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}

Bonjour.

Les divs de classe slid_etc... ne sont pas fermés (sauf le dernier). Le navigateur les considère comme imbriqués. Le résultat est assez confus.

ah oui.... tout con... Merci !!!

Mais par contre maintenant, lorsque l'on passe à la 2ème photo, j'ai la 3eme qui se superpose sur la 2eme ?!?!?!?! HELP

sinon est-il possible de faire une espace entre chaque photo?
Je n'arrive pas a comprendre, car j'ai redimensionné mes photos à la taille du diaporama donc je ne comprend pas pourquoi ca fait sauter la 2ème photo...!

C'est bon trouvé !
En tout cas merci pour ton aide !