How can I apply the background-color: #f8f8f8 class to the step class without interfering with the display of the horizontal lines after 1, 2? What could be causing this issue?
.main-progress {
text-align: center;
position: relative;
margin-top: 30px;
}
.step{
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: #12bd2a;
font-size: 14px;
width: 33.33%;
float: left;
position: relative;
font-weight: 600;
}
#progressbar .not-active:before {
color: #ffffff;
background: #4650ec;
}
#progressbar li:last-child{
color: #4650ec;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 36px;
height: 36px;
line-height: 36px;
display: block;
font-size: 16px;
color: #ffffff;
background-color: #12bd2a;
border-radius: 25px;
margin: 0 auto 10px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 5px;
background: black;
position: absolute;
left: -50%;
top: 16px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after {
/*background-color: #12bd2a;*/
color: white;
} <section class="step">
<div class="container">
<div class="row">
<div class="col-12>
<div class="main-progress">
<ul id="progressbar">
<li class="active">Upload Photos</li>
<li class="active">Model Settings</li>
<li class="not-active">Get Photos</li>
</ul>
</div>
</div>
</div>
</div>
</section>