Bootstrap: лишний пиксель при смене дефолтных отступов

Question

Сменил дефолтные отступы у col и row, в одном месте вылез лишний пиксель:

Пример: https://jsfiddle.net/w1s67s9o/1/

<style type="text/css">
html, body {
    padding: 15px;
}

/* Меняем дефолтные отступы */
.row {
    margin-left: -10px !important;
    margin-right: -10px !important;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding-right: 10px !important;
    padding-left: 10px !important;
}
</style>

<div class="row">
    <div class="col-xs-6">
        <div class="thumbnail">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon btn btn-number">
                        <i class="glyphicon glyphicon-minus"></i>
                    </div>
                    <input type="text" class="form-control text-center input-number" value="1" readonly>
                    <div class="input-group-addon btn btn-number">
                        <i class="glyphicon glyphicon-plus"></i>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-block btn-addtocart">В корзину</button>
        </div>
    </div>
</div>

Никак не могу понять откуда он взялся и как его убрать. Лишний пиксель появляется в Google Chrome. Пробовал менять отступы через "Customize and download" (@grid-gutter-width), результат тот же.

Заранее благодарен за помощь.