html - Elements moving out of vertical alignment -

having layout issue. i'm using bootstrap project not cards.

the project available here: http://marcmurray.net/jay_test/#

the elements in grid layout sized same height, not lining on same baseline. cards 2 lines seem align higher ones 1, life of me can't seem figure out why. not sure if can link codepen cards generated dynamically, css relating them here:

.mix {   width: 30%;   padding-top: 0.1em;   padding-bottom: 0.1em;   padding-left: 1em;   padding-right: 1em;   box-shadow: 2px 2px 2px #ddd;   display: inline-block;   margin-left: 1em; }    .item {   text-align: center;   background-color: #fff;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;   margin-top: 30px;   line-height: 1.5em;   position: relative; }   .item-bottom {   background-color: #f8f6f5;   width: 100%;   -webkit-transition: .25s;   -moz-transition: .25s;   -ms-transition: .25s;   -o-transition: .25s;   transition: .25s;   background-color: #f8f6f5;   height: 2em;   position: absolute;   bottom: 0px;   left: 0; } 

anyone have ideas?

i opened website, , opened developer tools , removed dispaly: inline-block; element , lined nicely.

these shouldn't inline-blocks. they're block-level elements.

so: make them:

display: block; float: left; 

and show , sit properly.

note: have remove hard-coded styling of inline-block on actual cards or override you're got.