Can't add background of a div in css - html

Question

I want to add background-color: #f8f8f8 class in step class. But when i added it then black horizontal line is not displaying after 1, 2. Where is the actual problem?
.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>

Answer 1

try this code
css
.main-progress {
text-align: center;
position: relative;
margin-top: 30px;
z-index:9;
}
.step{
background-color: #f8f8f8;
}
/*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.active:after {
content: '';
width: 100%;
height: 5px;
background:black;
position: absolute;
left: -50%;
top: 16px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li.not-active: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;
}

Answer 2

#progressbar:before,#progressbar:after{content:"";display:block;clear:both;}
Add this line and then you will be able to add. It will work for sure.

Answer 3

You see the only problem to your code was the z-index, you put the line before the .step in the z-index. Might be good if you put some z-index to all affected elements.
.main-progress {
text-align: center;
position: relative;
margin-top: 30px;
}
.step {
background: grey;
z-index: -1;
}
/*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>