Как выстроить блоки в одну линию?

Question

[Александр]

Нужно позиционировать блоки горизонтально. Описание классов в точности дублирует описание классов библиотеки Bootstrap. Не могу найти ошибку.

<div class="wrapper">
            <div class="wrapper-inner">
                <div class="av-col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, porro velit quibusdam explicabo rem laboriosam error aliquam commodi necessitatibus numquam quae deleniti odit debitis. Sapiente, placeat mollitia assumenda perspiciatis voluptas.</div>
                <div class="av-col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, porro velit quibusdam explicabo rem laboriosam error aliquam commodi necessitatibus numquam quae deleniti odit debitis. Sapiente, placeat mollitia assumenda perspiciatis voluptas.</div>
                <div class="av-col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, porro velit quibusdam explicabo rem laboriosam error aliquam commodi necessitatibus numquam quae deleniti odit debitis. Sapiente, placeat mollitia assumenda perspiciatis voluptas.</div>
            </div>
        </div>

.wrapper{
    background-color: #56f;
    margin-left: auto;
    margin-right: auto;
    padding-right: 15px;
    padding-left: 15px;
    max-width: 100%;
}

.wrapper-inner {
    background-color: #3f3f4f;
    margin-right: -15px;
    margin-left: -15px;
    
}

.av-col-4 {
    background-color: green;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
    width: 33.33333333%;
}

.wrapper:after,
.wrapper:before,
.wrapper-inner:after,
.wrapper-inner:before {
    display: table;
    content: ' ';
}
.wrapper:after,
.wrapper-inner:after {
    clear: both;
}

Ссылка на Editey workspace

Answer 1

[Андрей Клюев]

.av-col-4 {
    ...
    box-sizing: padding-box;
    ...
}

Comments

[Александр]

Да! Упустил. Исправил. Спасибо!

*, *:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Answer 2

[Александр]

Можно из колонки убрать

padding-left: 15px;
padding-right: 15px;

и все выровняется, но по сути врапперы резиновые и вложенные элементы не должны менять своего поведения.