I am working on playing around with a mini grid and even though my column widths equal up to 100% the third column is wrapping. What am I doing wrong?

<http://jsfiddle.net/d866tc0q/>

HTML

```
<div class="row">
    <div class="col-md-7">Here 1</div>
    <div class="col-md-3">Here 2</div>
    <div class="col-md-2">Here 3</div>
</div>

```

SASS (See JS fiddle for full SASS)

```
$width = 100%;
$max-col = 12;

.row {
    width: $width;
}

.col-md-2 {
    display: inline-block;
    width: percentage((2 / 12));
}

```

Thanks