How to transform vertical display to horizontal - html

Question

Currently I developing a registration form ... And I wish to include step by step for the user ... Code at the bottom I get from other site and I already modified some css ... however the element are showing in vertical ... What I need is horizontal ... I tried to position but it doesn't work ...
Currently Display
What I need
In HTML
<div class="steps">
<div id='genger' name='genger'/><label >Step 1</label></div>
<div id='genger' name='genger'/><label>Step 2</label></div>
<div id='genger' name='genger'/><label >Step 3</label></div>
<div id='genger' name='genger'/><label>Step 4</label></div>
<div id='genger' name='genger'/><label >Step 5</label></div>
</div>
In CSS
.steps{
width: 200px;
display:inline-block;
position: relative;
padding: 1em 2em 1em 3em;
vertical-align: top;
}
label{
background: #393D40;
height: 69px;
line-height: 69px;
width: 100%;
display: block;
border-bottom: 1px solid #44494e;
color: #889199;
text-transform: uppercase;
font-weight: 900;
font-size: 11px;
letter-spacing: 1px;
text-indent: 52px;
cursor: pointer;
transition: all 0.3s ease
}
label:before{
content:"";
width: 12px;
height: 12px;
border: 2px solid #25292e;
display: block;
position: absolute;
margin: 26px 0px 0px 18px;
border-radius: 100%;
transition: border 0.7s ease
}
label[for=genger]{
border-radius: 3px 3px 0px 0px;
}
label:hover{
background: #2B2E30;
color: #46b7e5
}
label:hover:before{
border: 2px solid #46b7e5;
}
Click for JSFiddle

Answer 1

Demo on Fiddle
HTML:
<div class="steps">
<div class='genger'>
<label>Step 1</label>
</div>
<div class='genger'>
<label>Step 2</label>
</div>
<div class='genger'>
<label>Step 3</label>
</div>
<div class='genger'>
<label>Step 4</label>
</div>
<div class='genger'>
<label>Step 5</label>
</div>
</div>
CSS:
.genger {
display: inline-block;
vertical-align: top;
margin: -1px;
}
.steps {
width: 100%;
display:inline-block;
position: relative;
vertical-align: top;
}
label {
background: #393D40;
height: 69px;
line-height: 69px;
width: 150px;
display: block;
border-bottom: 1px solid #44494e;
color: #889199;
text-transform: uppercase;
font-weight: 900;
font-size: 11px;
letter-spacing: 1px;
text-indent: 52px;
cursor: pointer;
transition: all 0.3s ease
}
label:before {
content:"";
width: 12px;
height: 12px;
border: 2px solid #25292e;
display: block;
position: absolute;
margin: 26px 0px 0px 18px;
border-radius: 100%;
transition: border 0.7s ease
}
label:hover {
background: #2B2E30;
color: #46b7e5
}
label:hover:before {
border: 2px solid #46b7e5;
}

Answer 2

First i have taken out your .steps width just removed the padding
you had also given your genger div codes as
<div id='genger' name='genger'/><label >Step 1</label></div>
you have closed the div before the label had started, I changed it to,
<div class='genger' name='genger'><label >Step 1</label></div>
also named your id genger to class
hence here is the final code...
#wrapper{
width:1200px;
margin:0 auto
}
.steps{
display:inline-block;
position: relative;
/*padding: 1em 2em;*/
vertical-align: top;
background:red;
width:100%;
}
.genger{
width:20%;
min-width:150px;
float:left;
}
label{
background: #393D40;
height: 69px;
line-height: 69px;
width: 100%;
display: block;
border-bottom: 1px solid #44494e;
color: #889199;
text-transform: uppercase;
font-weight: 900;
font-size: 11px;
letter-spacing: 1px;
text-indent: 52px;
cursor: pointer;
transition: all 0.3s ease
}
label:before{
content:"";
width: 12px;
height: 12px;
border: 2px solid #25292e;
display: block;
position: absolute;
margin: 26px 0px 0px 18px;
border-radius: 100%;
transition: border 0.7s ease
}
label[for=genger]{
border-radius: 3px 3px 0px 0px;
}
label:hover{
background: #2B2E30;
color: #46b7e5
}
label:hover:before{
border: 2px solid #46b7e5;
}
<div id="wrapper">
<div class="steps">
<div class='genger' name='genger'><label >Step 1</label></div>
<div class='genger' name='genger'><label>Step 2</label></div>
<div class='genger' name='genger'><label >Step 3</label></div>
<div class='genger' name='genger'><label>Step 4</label></div>
<div class='genger' name='genger'><label >Step 5</label></div>
</div>
<div>
Hope this helps.
P.S : you can center this menu as well . just wrap it inside a bigger div and give margin: 0 auto
EDIT:: If you want to be more flexible in your widths, you can add width:100% in the steps class and width 20% in genger class. See updated code snippet now

Answer 3

DEMO
check the demo, i have added in css
.steps {
width: 100%;
margin: 20px;
vertical-align: top;
}
.genger {float: left;width: 150px; }