Как я могу централизованно выровнять столбцы в Bulma?

Question

Я пытаюсь использовать панель инструментов на основе плиток (без использования плиток Бульмы), используя следующий макет:

https://jsfiddle.net/foobarbazian/9szfn8db/2/

<div class="container">
  <br>
  <div class="columns is-multiline">
    <div class="column is-3">
      <div class="box has-background-success">
        <p class="title has-text-centered">One</p>
        <div>
          <div class="columns ">
            <div class="column box is-5">A</div>
            <div class="column"></div>
            <div class="column box is-5">B</div>
            <div class="column"></div>
          </div>

          <div class="columns">
            <div class="column box is-5">C</div>
            <div class="column"></div>
            <div class="column box is-5">D</div>
            <div class="column"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="column is-3">
      <div class="box has-background-danger">
        <p class="title has-text-centered">Two</p>
        <div>
          <div class="columns ">
            <div class="column box is-5">A</div>
            <div class="column"></div>
            <div class="column box is-5">B</div>
            <div class="column"></div>
          </div>

          <div class="columns">
            <div class="column box is-5">C</div>
            <div class="column"></div>
            <div class="column box is-5">D</div>
            <div class="column"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="column is-3">
      <div class="box has-background-success">
        <p class="title has-text-centered">Three</p>
        <div>
          <div class="columns ">
            <div class="column box is-5">A</div>
            <div class="column"></div>
            <div class="column box is-5">B</div>
            <div class="column"></div>
          </div>

          <div class="columns">
            <div class="column box is-5">C</div>
            <div class="column"></div>
            <div class="column box is-5">D</div>
            <div class="column"></div>
          </div>
        </div>
      </div>
    </div>        
  </div>
</div>

Однако я вижу, что слева есть промежуток, который меньше по размеру справа в поле, а также в нижней части каждого окна.

Как я могу убедиться, что контент размещен в середине каждого поля?

Answer 1

 
.columns {
   flex-wrap: wrap; 
   justify-content: space-between
}
.column.is-5 {
height: 100%;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<div class="container">
  <br>
  <div class="columns is-multiline">
<div class="column is-3">
  <div class="box has-background-success">
    <p class="title has-text-centered">One</p>
    <div>
      <div class="columns ">
        <div class="column box is-5">A</div>
       
        <div class="column box is-5">B</div>
      
        <div class="column box is-5">C</div>
       
        <div class="column box is-5">D</div>
       
      </div>
    </div>
  </div>


</div>