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

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 #ffffd;
                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: #ffffd;
                top: 25px;
                left: -50%;
                z-index: -1;
            }

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

            &.active {
                color: #20bec6;
                &::before {
                    border-color: #20bec6;
                }

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