title: CSS Buttons into two columns
body: <p>I'm trying to make a multiple choice quiz with between four and eight buttons. The problem I'm running into is getting them to go into two columns. I've tried using "columns: 2", but they turn out uneven, and I've tried changing the width of the list in order to force them but that hasn't worked for me either.</p>
  
  <p>Here's a jsfiddle: <a href="https://jsfiddle.net/sethkillian2/2t63v2nz/3/" rel="nofollow noreferrer">https://jsfiddle.net/sethkillian2/2t63v2nz/3/</a></p>
  
  <pre><code>&lt;div id="central-area" class="central-area"&gt;
  
      &lt;div class="main multiple-choice"&gt;
           &lt;div class="question-row row column"&gt;
              &lt;div class="question-text"&gt;
              vivre
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="hint row column"&gt;
              &lt;span class="hint-text"&gt;Select the correct &lt;strong&gt;French&lt;/strong&gt; for the &lt;strong&gt;English&lt;/strong&gt; above:&lt;/span&gt;
          &lt;/div&gt;
          &lt;ol class="choices clearfix "&gt;
              &lt;li class="shiny-box choice clearfix" data-choice-id="0"&gt;
                  &lt;span class="val "&gt;to return&lt;/span&gt;
                  &lt;span class="marking-icon"&gt;&lt;/span&gt;
              &lt;/li&gt;
              &lt;li class="shiny-box choice clearfix" data-choice-id="1"&gt;
                  &lt;span class="val "&gt;to wear&lt;/span&gt;
                  &lt;span class="marking-icon"&gt;&lt;/span&gt;
              &lt;/li&gt;
              &lt;li class="shiny-box choice clearfix" data-choice-id="2"&gt;
                  &lt;span class="val "&gt;to sustain&lt;/span&gt;
                  &lt;span class="marking-icon"&gt;&lt;/span&gt;
              &lt;/li&gt;
              &lt;li class="shiny-box choice clearfix" data-choice-id="3"&gt;
                  &lt;span class="val "&gt;to live&lt;/span&gt;
                  &lt;span class="marking-icon"&gt;&lt;/span&gt;
              &lt;/li&gt;
          &lt;/ol&gt;
      &lt;/div&gt;  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS Code: </p>
  
  <pre><code>.multiple-choice .hint {
      text-shadow: 1px 1px 0 white;
      color: #aaa;
      font-family: "Helvetica Neue", "Helvetica", "Arial", "Kai", "KaiTi", Sans-Serif;
      padding: 11.42857px;
      font-size: 17.6px;
  }
  
  .multiple-choice .hint .hint-text {
      display: block;
      float: left;
      overflow: hidden
  }
  
  .multiple-choice ol {
      display: block;
      list-style-type: none;
      padding: 0;=
  }
  
  .multiple-choice li {
      width: 260px;
      margin-top: 12px;
      padding: 8px 17px 8px 43px;
      overflow: hidden;
  }
  
  .multiple-choice li:hover {
    background-color: purple;
    color: white;
  }
  
  .shiny-box {
      color: #6D6E70;
      border: 1px solid #e6e6e6;
      background-color: #fff;
      border-radius: 10px;
      background-repeat: repeat-x;
      background-size: 100% 100%;
      border: 1px solid #E6E6E6;
      color: #3E3E3E;
      font-family: "Times New Roman", "Times", "Kai", "KaiTi", Serif;
      font-size: 30px;
      line-height: 41px;
      transition: background-color 0.1s linear, opacity 0.1s linear, border-color 0.1s linear
  }
  </code></pre>
  
  <p>And here's a picture of what I'd like vs what I have.</p>
  
  <p><a href="https://i.stack.imgur.com/0cKBw.jpg" rel="nofollow noreferrer">Image</a></p>