how can i align this menu horizontally

Question

Good day everyone,

Please i have been debugging this for hours. It's displaying verically while i want it displayed horizontal.

What am i missing?

Below are the html, css, bootstrap and jquery codes.

Thanks

Snippet:

$("span#general-signup").appendTo( ".done" );

#activeStep{
    background: #007ee5;
    color: #fff;
	}

    #completedStep{
	color: #888;
    }

    .signUpStep {
    position: relative;
    float: left;
    background-color: #fafafa;
    height: 42px;
    width: 100%;
    margin: 0;
    overflow: hidden;
    color: #007ee5;
	}

    .stepNumb {
    float: left;
    font-size: 34px;
    line-height: 1em;
    font-weight: 300;
	}

    .stepInfo {
    margin-left: 22px;
    line-height: 16px;
    font-size: 17px;
    padding-top: 5px;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
        <span id="general-signup" class="pull-right"><i class="fa fa-check fa-2x " style="color: #99ff00;"  aria-hidden="true"></i></span>
    </div>

    <div class="row">
        
        <div id="completedStep" class="col-md-2 col-xs-6 col-sm-4 signUpStep">
                <div class="stepNumb">1</div>
                <div class="stepInfo done">Basic Info </div>
        </div>  

        <div id="completedStep" class="col-md-2 col-xs-6 col-sm-4 signUpStep">
                <div class="stepNumb">2</div>
                <div class="stepInfo done">Education</div>
        </div>

        <div id="completedStep" class="col-md-2 col-xs-6 col-sm-4 signUpStep">
                <div class="stepNumb">3</div>
                <div class="stepInfo done">Experience</div>
        </div>  
   
        <div class="col-md-2 col-xs-6 col-sm-4 signUpStep">
                <div class="stepNumb">4</div>
                <div class="stepInfo">Schedule</div>
        </div>  

        <div class="col-md-2 col-xs-6 col-sm-4 signUpStep">
                <div class="stepNumb">5</div>
                <div class="stepInfo">Social</div>
        </div>  

        <div id="completedStep" class="col-md-2 col-xs-6 col-sm-4 signUpStep">
                <div class="stepNumb">6</div>
                <div class="stepInfo done">Referral</div>
        
        </div>
    </div>

Answer 1

Add this CSS to change the attributes of the menu elements:

.row > div {
    display: inline-block;
    float: none;
    width: inherit;
}

https://jsfiddle.net/wrunnvqa/1/

Answer 2

The width you have specified in your code ie 100% takes the whole place for that specific div which is why every div appears to be a row rather than the complete div's being a single row.! More specifically

.signUpstep { . . width:100%;
. . }

make width equivalent size to fit it in the row.Mathematically 100%/(number of rows)

Answer 3

remove class="row" in your containing div and in your css remove the following:

.signUpStep {
    width: 100%
}

Bootply: http://www.bootply.com/1qMqaa5TTE