Inline-block not working on Div

Vote count:

0

I am creating a quiz app and I am currently creating the div that hold the questions and answers. I am having an issue with getting the answer div to line up in inline-block.

Here's the html:

<div id="question_holder">
    <span class="question">Who was the third President of the United States of America?</span>

    <div id="answer_holder">
      <input type="radio" name="choice" class="choice" value="0"> <span class="answer">James Madison</span>

      <input type="radio" name="choice" class="choice" value="1"> <span class="answer">John Adams</span>

      <input type="radio" name="choice" class="choice" value="2"> <span class="answer">Thomas Jefferson</span>

      <input type="radio" name="choice" class="choice" value="3"> <span class="answer">Andrew Jackson</span> 



    </div>

Here's the CSS:

#question_holder {
  position: relative;
  top: 2em;
  left: 18em;
  width: 40em;
  min-height: 25em;
  border: solid #2e1a12 5px;
  /* Background */
  background-image: url('Chalkboard.jpg');
  background-repeat: no-repeat;
  background-size: auto;
  color: #fff;
}

.question {
  position: relative;
  left: 7em;
  top: 3em;
  margin: 0;
  padding: 0;
  border: 0;
}

#answer_holder {
  display: inline-block;
  float: left; 
  border: solid red 1px;
}

asked 23 secs ago

trvrcallaway

1

Inline-block not working on Div