Progress bar lines disappears CSS

I have this progressbar and when it stands outside the <header> the lines between the steps is showing, but because of a needed z-index the lines doesn't show when its inside the <header> tag. Like this:

If I change the z-index the line goes through the boxes like this:

I don't know if there's a workaround this, but if you have any ideas, please let me know!

My code for the relevant parts:

body {
    background: #000;
}

header {
    background-image: url("http://texturemate.com/image/view/1560/_original");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
}

/*form styles*/
    #msform {
        width: 400px;
        margin: 50px auto;
        text-align: center;
        position: relative;
    }

    /*progressbar*/
    #progressbar {
        margin-bottom: 30px;
        overflow: hidden;
        /*CSS counters to number the steps*/
        counter-reset: step;
    }
    #progressbar li {
        list-style-type: none;
        color: white;
        text-transform: uppercase;
        font-size: 9px;
        width: 33.33%;
        float: left;
        position: relative;
    }
    #progressbar li:before {
        content: counter(step);
        counter-increment: step;
        width: 50px;
        line-height: 50px;
        display: block;
        font-size: 10px;
        color: #333;
        background: white;
        border-radius: 50%;
        margin: 0 auto 5px auto;
    }
    /*progressbar connectors*/
    #progressbar li:after {
        content: '';
        width: 100%;
        height: 2px;
        background: white;
        position: absolute;
        left: -50%;
        top: 25px;
        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: #27AE60;
        color: white;
    }

<header>
    <div class="container">
        <div class="navbar">
            <div class="navbar-brand">
                <a href="/" id="logo" class="logo" alt="Home">
                    <img src="logo.png" class="hidden-sm"/>
                </a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12 progressbar">
                <form id="msform">
                    <!-- progressbar -->
                    <ul id="progressbar">
                        <li class="active">Account Setup</li>
                        <li>Social Profiles</li>
                        <li>Personal Details</li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
</header>

Solution

You can decrease the width of lines then adjust Left position to put it between circles ( from outer border of circles not from center ), also don't forget to set z-index: 1 for lines.

Something like this:

body {
  background: #000;
}

header {
  background-image: url("http://www.solidbackgrounds.com/images/2880x1800/2880x1800-air-force-dark-blue-solid-color-background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0;
}

/*form styles*/
#msform {
  width: 400px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}

/*progressbar*/
#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
}

#progressbar li {
  list-style-type: none;
  color: white;
  text-transform: uppercase;
  font-size: 9px;
  width: 33.33%;
  float: left;
  position: relative;
}

#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 50px;
  line-height: 50px;
  display: block;
  font-size: 10px;
  color: #333;
  background: white;
  border-radius: 50%;
  margin: 0 auto 5px auto;
}

/*progressbar connectors*/
#progressbar li:after {
  content: '';
  width: 60%;  /* Changed */
  height: 2px;
  background: white;
  position: absolute;
  left: -30%;  /* Changed */
  top: 25px;
  z-index: 1;  /* Changed */
}

#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: #27AE60;
  color: white;
}

<header>
    <div class="container">
        <div class="navbar">
            <div class="navbar-brand">
                <a href="/" id="logo" class="logo" alt="Home">
                <img src="logo.png" class="hidden-sm"/>
                </a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12 progressbar">
                <form id="msform">
                    <!-- progressbar -->
                    <ul id="progressbar">
                        <li class="active">Account Setup</li>
                        <li>Social Profiles</li>
                        <li>Personal Details</li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
</header>