No puedo entender por qué hay espacio a la derecha del primer paso cuando escribo más de 13 letras. Si solo escribo el paso 1, entonces está bien. Ver abajo el código. O visita micodepen. ¿Puede alguien ponerme en la dirección correcta, por favor? También he incluido algunas capturas de pantalla cuando funciona correctamente.

HTML

<div class="container">
  <ul class="progress--bar">
    <li class="active">Step 1 space to the right</li>
    <li>Step 2 is good</li>
    <li>Step 3 is good</li>
  </ul>
</div>

CSS

.container {
  text-align: center;
  color: #20BEC6;
  margin: 30vh auto;

  .progress--bar {
    counter-reset: step;
    display: table;
    padding: 0;
    width: 100%;

    li {
      list-style-type: none;
      display: table-cell;
      position: relative;
      text-align: center;
      color: black;

      &::before {
        content: counter(step);
        counter-increment: step;
        width: 50px;
        height: 50px;
        line-height: 50px;
        border: 5px solid #ddd;
        display: block;
        text-align: center;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        background-color: white;
      }

      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 5px;
        background-color: #ddd;
        top: 25px;
        left: -50%;
        z-index: -1;
      }

      &:first-child::after {
        content: none;
      }

      &.active {
        color: #20BEC6;

        &::before {
          border-color: #20BEC6;
        }

        + li::after {
          background-color: #20BEC6;
        }
      }
    }
  }
}