Bootstrap überlappenden Rand mit Spalten ohne Rand und Padding

Question

Ich habe dieses lästige Problem mit den Grenzen der divs. Wie kann ich vermeiden, dass sich die Grenzen überlappen?

Das ist mein codepen wo Sie das Problem sehen: http://codepen.io/mp1985/pen/Bzrgzx

.square { 
    background-color: #595959; 
    position: relative; 
    text-align: center; 
    width: 100%; 
    -webkit-transition: background-color .3s,color .3s; 
    transition: background-color .3s,color .3s; 
    overflow: hidden; 
    border: 1px solid #ffde14; 
} 

.square:after { 
    content: ""; 
    display: block; 
    padding-bottom: 100%; 
} 

Answer 1

Wenn Ihre Rahmenbreite festgelegt Sie dies durch eine Verringerung der rechten Rand der Bootstrap cols durch die Breite der Grenze vermeiden:

& > [class^="col-"], 
    & > [class*=" col-"] { 
    padding-right: 0; 
    padding-left: 0; 
    margin-right: -1px; /* <- */ 
    }