CSS Multistep Progress bar

Question

I can't figure out why there is space to the right of the first step when i write more then 13 letters in it. If i only write step 1 then it's fine. See below the code. Or visit my codepen. Can someone put me in the right direction, please. I have also included some screen shots when it's working properly.

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;
        }
      }
    }
  }
}

Answer 1

Using flex instead of tables, when the table gets bigger based on the input, the table will expand and while the box expand, there will be some spacing between the elements. Here is an example of using flex instead. As we are now using flex, the progress-bar will expand its width based on the screen size or the room given.

.container {
    text-align: center;
    color: #20bec6;
    margin: 30vh auto;
    max-width: 835px;
    width: 100%;

    .progress--bar {
        display: flex;
        padding: 0;

        li {
            list-style-type: none;
            position: relative;
            text-align: center;
            color: black;
            width: 100%;

            &::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;
                }
            }
        }
    }
}