Карусель с абсолютно позиционированными детьми не работает

Question

Я строю карусель с использованием HTML / CSS, и у меня возникла проблема, с которой я не могу разобраться.

Я поместил детей (.card) в карусельный контейнер и хочу, чтобы они скользили из стороны в сторону при переходе по ссылкам ниже.Это прекрасно работает при переходе с card4 назад на card1, но не вперед с card1 на card4.Затем он просто переходит на card4 и, кажется, выталкивает активную карту с экрана.

Странно, когда я редактирую позицию своих неактивных карт на

left:95%;

вместо

left:100%;

(см. В самом низу фрагмента CSS), он работает как положено.

Протестировано в Chrome, Firefox и на Codepen Просмотр на CodePen

Большое спасибо за вашу помощь.

Это мой код:

*{
  box-sizing: border-box;
}

.carousel-links{
  text-align:center;
  position:fixed;
  bottom: 5%;
  left:0;
  right:0;
  z-index:100;
}
.carousel-links a{
  display: inline-block;
  border-radius: 5px;
  border: 1px solid black;
  padding: 1em;
  background:white;
}


.carousel{
  position: relative;
  width:100%;
  height:80vh;
  background:yellow;
  border:5px solid black;
  display:block;
  overflow-x: hidden;
}
.card{
  position: absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  border: 1px dashed black;
  font-size:100px;
  transition: all 2s;
  z-index:1;
}
.carousel > .card:target{
  left:0%;
  //background:rgba(255,0,0,1);
  z-index:2;
}
.carousel > .card:target~*{
  left:100%; 
  /* left:95%;  /*with this line it works */
  z-index:0;
}

<div class="carousel-links">
  <a href="#card1">1</a>
  <a href="#card2">2</a>
  <a href="#card3">3</a>
  <a href="#card4">4</a>
</div>

<div class="carousel">
  <div class="card" id="card1">1</div>
  <div class="card" id="card2">2</div>
  <div class="card" id="card3">3</div>
  <div class="card" id="card4">4</div>
</div>