My <div> contents are not centering correctly

Question

I have a div that looks like this

<div id="question">

    <h1 id="answer_no" class="question_element">NO</h1>

    <div id="slider" class="question_element">
        <input type="range" min="-1" max="1" value="0" step="0.01" onmousemove="showValue(this.value)"/>
        <span id="range">0</span>
    </div>

    <h1 id="answer_yes" class="question_element">YES</h1>

</div>

And I would like to have all of the question_element objects centered horizontally inside. My css looks like this

#question {
    border: 1px solid orange;
    width: 100%;
    text-align: center;
}

.question_element {
    float: left;
    display: inline-block;
    margin-top: 200px;
    margin-left: 25px;
    margin-right: 25px;
}

#slider {
    width: 400px;
    margin-top: 215px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

However, my page still looks like this:

As you can see, the elements are still shifted to the left. I would like them to be all centered horizontally. What am I doing wrong?

Answer 1

You can remove the float property, or you can wrap all the inner divs an another div and set it to inline-block.