title: Bootstrap showing as one column instead of two
body: <p>Title pretty much says it all. I'd expect to see two columns, which isn't happening. Would really appreciate any help. Code can be found here: <a href="https://codepen.io/jar5/pen/NWWXBro" rel="nofollow noreferrer">https://codepen.io/jar5/pen/NWWXBro</a></p>
  
  <p>I've done a lot of Googling and tested every solution I could find. </p>
  
  <p>I cut some of the items in the list to save space, but you can see the full code at the codepen link.</p>
  
  <pre><code>&lt;div&gt;
    &lt;div id="question" class="col-6"&gt;
      &lt;h2&gt;Question 1:&lt;/h2&gt;
      &lt;p&gt;Here's a question with choices&lt;/p&gt;
      &lt;ul class="list-group"&gt;
        &lt;label for="0"&gt;
          &lt;li class="list-group-item"&gt;
            &lt;input id="0" type="radio" name="answer" value="0"&gt;Choice 1
          &lt;/li&gt;
        &lt;/label&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="col-3 infobox"&gt;
      &lt;h4&gt;This should be on the next column&lt;/h4&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>No error messages. The <code>&lt;h4&gt;</code> at the bottom should be showing up in a second column.</p>