Почему тут возникает расстояние между элементами?

Question

[dhat]

Не могу никак найти причину кривого отображения.
1. Почему между элементами .logo и .search возникает пространство? Ведь они по идее, должны идти ровно друг за другом.
2. Почему элемент .search отступает от верхнего края страницы?

И как это все исправить? Не могу в DevTools даже причину конфликта найти, а ведь все должно быть просто (уже раз 20 одно и тоже подобное делал и опять проблема).

codepen.io/dhatt/pen/yaJqJP

Answer 1

[Алексей]

Тут у вас используется display: inline-block; соответственно работает все как встроенный элемент.

1. Пространство возникает так как между встроенными элементами по умолчанию включаются пробелы, надо у nav сделать font-size: 0; а у блоков .logo и .search установить необходимые значения шрифта
   
2. Встроенные элементы по умолчанию выравниваются по вертикали: по базовой линии. Надо для .search и .logo поставить vertical-align: top;
   

Answer 2

[Mois]

Вот так:
codepen.io/Mois-ilya/pen/KgrBBo

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