css - Using flexbox to display tournament brackets -

i trying use flexbox display tournament bracket ncaa bracket. here plunk:

@import "//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css";  .game {    width: 50px;    height: 20px;    background-color: lightgrey;    margin: 2px;  }  .game:after {    content: 'game';  }  .container {    display: flex;    flex-direction: column;    justify-content: space-around;    height: 384px;  }

<div class="row">    <!--round 1-->    <div class="container col-sm-1">      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>    </div>    <!--round 2-->    <div class="container col-sm-1">      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>    </div>    <!--round 3-->    <div class="container col-sm-1">      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>    </div>    <!--round 4-->    <div class="container col-sm-1">      <div class=game></div>      <div class=game></div>    </div>    <!--round 5-->    <div class="container col-sm-1">      <div class=game></div>    </div>  </div>

i no css expert, thought process if number of divs in every column half compared previous 1 , if space-around used, divs should automatically align correctly (centered between previous rounds games). aligned not centered between right games. missing?

the problem bootstrap inserts pseudo-elements add additional space @ top , bottom:

.container::after, .container::before {   display: table;   content: " "; } 

so remove bootstrap , add this:

.row {     display: flex; } 

.row {    display: flex;  }  .game {    width: 50px;    height: 20px;    background-color: lightgrey;    margin: 2px;  }  .game:after {    content: 'game';  }  .container {    display: flex;    flex-direction: column;    justify-content: space-around;    height: 384px;  }

<div class="row">    <!--round 1-->    <div class="container col-sm-1">      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>    </div>    <!--round 2-->    <div class="container col-sm-1">      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>    </div>    <!--round 3-->    <div class="container col-sm-1">      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>    </div>    <!--round 4-->    <div class="container col-sm-1">      <div class=game></div>      <div class=game></div>    </div>    <!--round 5-->    <div class="container col-sm-1">      <div class=game></div>    </div>  </div>

or can use bootstrap avoid container class:

@import "//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css";  .game {    width: 50px;    height: 20px;    background-color: lightgrey;    margin: 2px;  }  .game:after {    content: 'game';  }  .row > div {    display: flex;    flex-direction: column;    justify-content: space-around;    height: 384px;  }

<div class="row">    <!--round 1-->    <div class="col-sm-1">      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>    </div>    <!--round 2-->    <div class="col-sm-1">      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>    </div>    <!--round 3-->    <div class="col-sm-1">      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>      <div class="game"></div>    </div>    <!--round 4-->    <div class="col-sm-1">      <div class=game></div>      <div class=game></div>    </div>    <!--round 5-->    <div class="container col-sm-1">      <div class=game></div>    </div>  </div>