Блочно-строчные элементы ведут себя как текст, поэтому если в коде есть пробел между элементами, то он отображается и на странице. Этот пробел часто увеличивает отступы между элементами и они не помещаются в родительский блок в одну строку, хотя по размерам должны бы.
Решить проблему можно несколькими способами. Пример:
1. Убрать пробелы:
<ul>
<li>
Один</li><li>
Два</li><li>
Три</li>
</ul>
2. Отрицательный внешний отступ margin-right:-4px у элементов. Способ заключается в том, что мы уменьшаем отступ после инлайн-блока на ширину пробела (~4px). А если нам нужно, чтобы элементы стояли вплотную друг к другу, то задаём отрицательный отступ.
Проблема с этим способом заключается в том, что размер пробела может быть разным в разных шрифтах и может изменяться при изменении размера шрифта.
nav a { display: inline-block; margin-right: -4px; }
3. Установить размер шрифта пробела, равный нулю. Способ заключается в том, что мы задаём нулевой размер шрифта у контейнера инлайн-блоков, а самим инлайн-блокам задаём исходный размер шрифта. Способ не работает, если вы используете относительные размеры шрифта.
nav { font-size: 0; }
nav a { font-size: 16px; }
4. Не использовать закрывающий тег. Относится только к спискам.
<ul>
<li>Один
<li>Два
<li>Три
</ul>
5. Использовать flexbox
nav {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}