Slider Not fully sliding and creating some unslided space upon every slide

[codeispoetry]

I have replicated a slider here.

I am seeking help to understand where I am faltering in calculations.

this is the culprit:

flex: 0 0 calc((100%) / var(--slides-across));

Or

Which property is hindering the full swipe?

[PaulOB]

The padding and border make it bigger than 100%. Add box-sizing:border:box.

.hrecur {
  flex: 0 0 calc((100%) / var(--slides-across));
  transition: transform 0.5s;
  padding: 7px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  background-color: var(--color4);
  background-clip:content-box;
  border: 2px solid red;
  box-sizing:border-box;
}