title: Can't figure out how to fit content on 2 columns
body: <p>I can't figure out how to fit content on 2 columns, to display it correctly. 
  I would like the content (later will be several images, 6+) on two columns, centred on each of them.</p>
  
  <p>I tried with the code above but I'm looking for something more appropriate for my case.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.portfolio-column {
    column-count: 2;
    column-gap: 40px;
    column-width: 100px;
  }
  
  .box1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
  }
  
  .box2 {
    width: 300px;
    height: 100px;
    border: 1px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="fixed-bg3" id="portfolio"&gt;
    &lt;a href=""&gt;&lt;/a&gt;
    &lt;p class="portfolio"&gt;Portfolio&lt;/p&gt;
    &lt;div class="portfolio-column"&gt;
      &lt;div class="box1"&gt;&lt;/div&gt;
      &lt;div class="box2"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>