La barra de progreso no se activa en el paso 1.

Soy un traductor de español que traduce documentos de IT. Traduzca lo siguiente al español. No traduzca el código y el resultado en Markdown.

Soy muy nuevo en la programación y quería agregar una barra de progreso en mi sitio web. Pero cuando quiero hacer que el “paso 1” esté “activo”, es el “paso 2” el que se activa (y cuando hago que el paso 2 esté activo, es el paso 3 el que se activa, y así sucesivamente).

Aquí está el código CSS en el archivo bootstrap.css:

.container{
width: 140%;
position: absolute;
z-index: 1;
}

.progressbar li{
float: left;
width: 20%;
position: relative;
text-align: center;
}

.progressbar li:before{
content: “1”;
width: 30px;
height: 30px;
border: 2px solid #bebebe;
display: block;
margin: 0 auto 10px auto;
border-radius: 50%;
line-height: 27px;
background: white;
color: #bebebe;
text-align: center;
font-weight: bold;
}

.progressbar{
counter-reset: step;
}

.progressbar li:before{
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
border: 2px solid #bebebe;
display: block;
margin: 0 auto 10px auto;
border-radius: 50%;
line-height: 27px;
background: white;
color: #bebebe;
text-align: center;
font-weight: bold;
}

.progressbar li:after{
content: ”;
position: absolute;
width:100%;
height: 3px;
background: #37606f;
top: 15px;
left: -50%;
z-index: -1;
}

.progressbar li:first-child:after{
content: none;
}

.progressbar li.active + li:after{
background: #37606f;
}

.progressbar li.active + li:before{
border-color: #37606f;
background: #37606f;
color: white;
}

¿Qué puedo hacer para que funcione?