Bootstrap grid overlapping using outline

Question

I'm trying to create a fluid grid using Bootstrap where all divs have the same size border, both inside and out, requiring outline rather than border.

When I use this, the bottom box always overlaps slightly into the two boxes directly above it. I've tried looking through old questions but haven't found any that quite deal with this.

HTML

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-3 col-md-2 stategrid">
            <h5>1</h5>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 stategrid">
            <h5>2</h5>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 stategrid">
            <h5>3</h5>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 stategrid">
            <h5>4</h5>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 stategrid">
            <h5>5</h5>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 stategrid">
            <h5>6</h5>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 stategrid">
            <h5>7</h5>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 stategrid">
            <h5>8</h5>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 stategrid">
            <h5>9</h5>
        </div>
    </div>
</div>

CSS:

.stategrid {
    outline: 3px solid #000;
    background: #B1C3CD;
    min-height: 40px;
    text-align:center;
}

Codepen: http://codepen.io/abrite/pen/OROqPy

Can you identify where I'm going wrong? I assume I want to use clear in here somewhere, but I'm not having a lot of luck.

Answer 1

Since you're using an outline of 2px, 1px is outside the boundary of each cell (col). Bootstrap columns have no margin so the outline is overlapping all of the cells by 1px. If you add a margin of 1px, the outline will not overlap..

.stategrid {
    outline: 2px solid #000;
    background: #B1C3CD;
    min-height: 40px;
    text-align:center;
    margin: 1px;
}

http://www.codeply.com/go/peZ1eNd78d

If you want a 3px outline, the margin should be half (1.5px) of that..

.stategrid {
    outline: 3px solid #000;
    background: #B1C3CD;
    min-height: 40px;
    text-align:center;
    margin: 1.5px;
}