html - Missplaced bootstrap column -

i have problems (bootstrap) coulmn ends missplaced , can't figure out why. if can explain me why have happend , how solve greatfull.

preview: http://www.bootply.com/6n2fo36f6i

as can see "location" column 1px right.

html:

    <div class="row equal-height"> <!-- start bs row -->     <div class="col-md-1"> <!-- start bs col-md-1 -->     </div> <!-- end bs col-md-1 -->     <div class="col-md-3 zeropadding-right"> <!-- start bs col-md-4 -->         <div class="singlepage-list-style"> <!-- start singlepage-list-style -->             <div class="list-header"> <!-- start liste-header -->                 <h1>quick info</h1>             </div> <!-- end list-header -->             <div class="the-list"> <!-- start the-liste -->             <ul>                 <li class="check">blah<sup>2</sup></li>                 <li class="check">blah</li>                 <li class="check">blah</li>                 <br>                 <li class="check">blah <p><i class="fa fa-check"></i></p></li>                 <li class="check">blah <p><i class="fa fa-check"></i></p></li>                 <li class="non-check">blah</li>                 <li class="non-check">blah</li>                 <li class="check">blah <p><i class="fa fa-check"></i></p></li>                 <li class="check">blah <p><i class="fa fa-check"></i></p></li>                 <li class="check">blah <p><i class="fa fa-check"></i></p></li>                 <li class="check">blah <p><i class="fa fa-check"></i></p></li>                 <li class="non-check">blah</li>                 <li class="check">blah <p><i class="fa fa-check"></i></p></li>                 <li class="non-check">blah</li>                 <li class="non-check">blah</li>                 <li class="check">blah <p><i class="fa fa-check"></i></p></li>                 <li class="non-check">blah</li>             </ul>             </div> <!-- end the-list -->         </div>     </div> <!-- end bs cold-md-4 -->     <div class="col-md-7 zeropadding-left"> <!-- start bs col-md-6 -->         <div class="singleheader-content-style"> <!-- start singlepage-content-style -->             <h1>property description</h1>             <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. ut pellentesque molestie nunc vel ultrices. nunc lobortis libero neque, @ dignissim metus vulputate id. nam placerat cursus ex eget maximus. maecenas finibus mauris quis erat luctus, sed tempus felis egestas. aliquam erat volutpat. fusce tempus turpis justo, eleifend laoreet odio vulputate eget. sed eget tortor dui. proin maximus elit orci, imperdiet velit commodo at. sed id nibh posuere, malesuada justo ac, elementum orci. nullam id turpis eu libero lacinia egestas.      donec in condimentum nisl, et sodales libero. duis non enim sed est rutrum tempus. proin sit amet elit quis libero semper faucibus. nullam non neque velit. donec tortor libero, euismod vel consequat at, lobortis nec tellus. proin ac metus in leo interdum viverra auctor nisl. sed volutpat @ risus nec laoreet. nunc vitae pharetra diam.      cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. nam dictum tincidunt enim et posuere. vivamus congue, eros sed mollis sagittis, massa quam accumsan nibh, nec dictum ipsum urna ut ex. cras vel scelerisque dui. nulla aliquet ex quis quam volutpat commodo. morbi lacinia, libero nec semper porta, lectus tellus ornare orci, quis varius velit urna et neque. maecenas venenatis tincidunt lorem luctus. etiam @ malesuada eros. donec vulputate augue vel placerat dapibus. aenean sed convallis leo. aenean sed auctor lacus. nam sed ultricies arcu. in sem vel mi ullamcorper pretium. suspendisse convallis enim eget luctus rutrum. suspendisse potenti.      vivamus rutrum @ ex et feugiat. aenean purus risus, vehicula @ quam et, placerat rutrum augue. pellentesque ipsum neque, vehicula ut risus vestibulum, sagittis commodo mi. cras volutpat laoreet elit id interdum. mauris lorem lobortis, imperdiet mauris eu, ultricies leo. integer sollicitudin erat lorem, scelerisque enim viverra sit amet. ut volutpat nisi et velit consectetur, et rutrum magna cursus. donec justo sem, placerat sed dapibus vitae, rutrum nec ante. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. in hac habitasse platea dictumst. duis sollicitudin eget ipsum vel fringilla. donec eget nisl eros. phasellus ut lobortis diam. in magna purus, consectetur non accumsan quis, egestas imperdiet eros.      suspendisse nec pellentesque velit. suspendisse potenti. mauris @ iaculis lectus. in placerat vehicula tellus, luctus cursus velit bibendum quis. nam ipsum justo, dignissim sit amet sollicitudin a, euismod in nisi. quisque nec enim ac magna iaculis facilisis. etiam ut tempor libero. phasellus elit quam, lobortis @ felis ut, congue consequat nulla. aenean ultricies fringilla massa vel feugiat. vivamus sagittis, ipsum nec cursus tempor, nulla est consequat tortor, ac imperdiet augue lacus nec mauris. morbi eros quis elit condimentum consequat vel quis ex. etiam dictum sodales mauris viverra fermentum. ut id molestie arcu. in semper ante sed finibus vestibulum. quisque sed sodales enim, vel sagittis neque. morbi fermentum gravida leo, non auctor ipsum tristique vel.      vestibulum dapibus, lectus eget lacinia aliquam, mi tortor ultricies quam, in dapibus libero dui in mauris. donec tempus sagittis augue, vitae eleifend erat pellentesque semper. nam auctor sagittis scelerisque. sed ut nibh.</p>         </div> <!-- end singleheader-content-style -->     </div> <!-- end bs col-md-6 -->     <div class="col-md-1"> <!-- start bs col-md-1 -->     </div> <!-- end bs col-md-1 --> </div> <!-- end bs row --> <div class="row"> <!-- start bs row -->     <div class="col-md-1"> <!-- start bs col-md-1 -->     </div> <!-- end bs col-md-1 -->     <div class="col-md-10"> <!-- start bs col-md-10 -->         <div class="maps-style"> <!--start maps-pos -->             <h1>location</h1>           <div style="width:100%;height:350px;background-color:red;">placeholder</div>         </div> <!-- end maps-pos -->     </div> <!-- end col-md-10 -->     <div class="col-md-1"> <!-- start bs col-md-1 -->     </div> <!-- end col-md-1 --> </div> <!-- end bs row --> 

css:

/***** info & content height controler *****/  .equal-height, .equal-height > div[class*='col-'] {         display: -webkit-box;       display: -moz-box;       display: -ms-flexbox;       display: -webkit-flex;       display: flex;       flex:1 0 auto;   }  .zeropadding-right {     padding-right:0px; }  /***** singleheader content area styling *****/  .singleheader-content-style {     background-color:#fff;     border-right: 1px solid #9c9c9c;     padding:20px;     font-family: 'open sans', sans-serif;     width:100%; }  .singleheader-content-style h1,h2,h3,h4,h5,h6 {     margin-top:0px; /* change boostraps default */     color:#de1b1b; }  /***** singleheader list area styling *****/  .singlepage-list-style {     background-color:#fff;     border-left: 1px solid #9c9c9c;     padding:20px;     font-family: 'open sans', sans-serif;     width:100%;     font-size:16px; }  .singlepage-list-style ul li {     list-style-type:none; }  .singlepage-list-style ul {     padding-left:20px; }  .check p {     color:#44a331;     display:inline; }  .non-check {     opacity:0.5; }  .the-list {     border-right: 1px solid #9c9c9c;     width:100%; }  .list-header {     width:100%; }  .list-header h1,h2,h3,h4,h5,h6 {     margin-top:0px; /* change boostraps default */     color:#de1b1b; }  /***** start maps styling *****/  .maps-style img{     width:100%;     border-top:1px solid #9c9c9c;     border-bottom:1px solid #9c9c9c;     font-family: 'open sans', sans-serif; }  .maps-style {     background:#fff;     border-right:1px solid #9c9c9c;     border-left:1px solid #9c9c9c; }  .maps-style h1 {     margin-top:0px; /* change boostraps default */     margin-left:20px;     color:#de1b1b; } 

and explained above, know why happening (what in code making happen). can learn misstakes. , how solve issue.

thanks.

the problem due flex style used in first row through equal-height remember float, clear , vertical-align have no effect on flex item , bootstrap columns have float: left.

so fix add equal-height second row , flex-grow .maps-style this:

<div class="row equal-height">   .maps-style{     flex-grow: 1;  /*or width 100%*/ } 

here working jsfiddle example: http://jsfiddle.net/yandy_viera/nc2rm6ko/