html - How to properly break CSS3 columns? A pixel line is in the wrong column -

currently building wordpress plugin, going on styling , layout of it.

i have within. div css-set columns: 2, , children have column-break:avoid; (i tried combinations) still show line 1 , in wrong column.

image of what's wrong:

the blue block leaves one-pixel hight line on left column, should not.

<div class="parents columns two">      <aside class="myp myp-card female">          <a href="http://localhost/dev/#" title="mother">              <div class="card-image">                 <img src="http://localhost/dev/wp-content/uploads/2015/05/skye_medium.jpg" alt="view mother" style="width:100%;">             </div>              <div class="card-overlay">                 <h1 class="card-title">mother</h1>             </div>          </a>      </aside>      <aside class="myp myp-card male">          <a href="http://localhost/dev/#" title="father">              <div class="card-image">                 <img src="http://localhost/dev/wp-content/uploads/2015/05/border_collie_liver_portrait.jpg" alt="view father" style="width:100%;">             </div>              <div class="card-overlay">                 <h1 class="card-title">father</h1>             </div>          </a>      </aside>  </div> 

and css...

.columns {   -webkit-column-count: 2;   -moz-column-count: 2;   column-count: 2;    -webkit-column-gap: 1em;   -moz-column-gap: 1em;   column-gap: 1em; } .columns > * { display: block; width: 100%;   -webkit-column-break:avoid; -moz-column-break:avoid; -o-column-break:avoid; -ms-column-break:avoid; column-break:avoid; }  .columns.one { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } .columns.two { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .columns.three { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .columns.four { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .columns.five { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }  .myp-card { position: relative; margin: 0 0 1em; padding: 0; } .myp-card { border:0; } .myp-card .card-image { position: relative; background-color: #000; } .myp-card .card-image img { opacity: .25; width: 100%; } .myp-card .card-overlay { position: absolute; bottom: 0; left: 0; width: 100%; } .myp-card .card-overlay .card-title { font-size: 1.1em; margin: 0; padding: 1em; color: #000; } .myp-card a:hover .card-image img { opacity: 1; } .myp-card a:hover .card-overlay { display: none; }  .myp-card.male .card-image {     background: rgb(30, 115, 190); } .myp-card.male .card-overlay .card-title {     color: #ffffff; } .pedigree-tree li.male > span {     border-color: rgb(30, 115, 190); } .male-color {     color: rgb(30, 115, 190); } .myp-card.female .card-image {     background: rgb(232, 37, 215); } .myp-card.female .card-overlay .card-title {     color: #ffffff; } .female-color {     color: rgb(232, 37, 215); } 

how can rid of line? managed display: list-item; aside tags creates margin cannot control (margin:0 , padding:0 not work).

thanks guys...

perhaps, somewhere in css used vertical-align: bottom; images? deactivating me solution, because had same problem...