Aligning labels at the center - html

Question

I want to align 4 text labels at the center with a margin of 5px.
The Code:
.header_section span {
width: 100%;
}
.header_section min {
padding-left: 30%;
padding-right: 5%;
}
.header_section consume {
padding-right: 5%;
}
<div class="header_section">
<span class="min">Min</span>
<span class="consume">Consumption</span>
<span class="avg">Average</span>
<span class="max">Max</span>
</div>
Do I need to add an id instead of a class?
Do I need to use the label tag instead of the span tag?

Answer 1

<style>
.header_section{
text-align:center;
}
.header_section span {
width: 100%;
}
.header_section min {
padding-left: 30%;
padding-right: 5%;
}
.header_section consume {
padding-right: 5%;
}
</style>

Answer 2

Below style can do this. It adds a left-margin of 5px to all spans except the first.
.header_section{
text-align:center;
}
.header_section span + span {
margin-left:5px;
}
A bit improved version is here in this fiddle

Answer 3

Do I need to add an id instead of a class?
No
Do I need to use the label tag instead of the span tag?
No. Labels are for texts associated to a input in a form. Maybe is a list, depending of the semactic meaning.
.header_section{
text-align:center;
}
.header_section li{
display:inline-block;
margin-right:5px;
}
<ul class="header_section">
<li>Min</li>
<li>Consumption</li>
<li>Average</li>
<li>Max</li>
</ul>