Отображать встроенный блок с шириной в процентах

Я пытаюсь поставить 2 секции рядом друг с другом, используя inline-block и ширину в процентах, но не заполняя всю ширину моего окна.

Что я до сих пор:

HTML

<section class="left-content">
    "Some Code"
</section>
<section class="main-content">
    "Some More Code"
</section>

CSS

.left-content, .right-content { 
    width: 15%; 
    min-width: 150px; 
    padding: 5px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
}
.main-content { 
    width: 85%; 
    min-width: 712px; 
    padding: 10px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
}

Но если я не выработаю точный процент до десятичной точки на моем экране, это не сработает. Кто-нибудь знает способ сделать это с помощью inline-block или мне нужно использовать float?

Ответы

Ответ 1

Это связано с тем, что в вашей HTML-разметке пробегает пробел и строка, что вызывает эту проблему. Существует два варианта решения "проблемы":
1. Удалите разрывы строк и пробелы из вашего кода
2. установите для элемента font-size родительского элемента значение "0"

Кроме того, вы установили box-sizing: border-box?