Если вы посмотрите antonpug.com
Вы заметите, что в Firefox и Opera заголовок содержит заголовок (значок поиска) (меню)
Однако в Chrome и Safari кажется, что оба элемента отказываются быть встроенными, и вы получаете что-то вроде этого:
(Значок поиска)
Антон Пугачевский (Меню)
Я размышлял об этом на какое-то время, какие-нибудь идеи, почему это может произойти?
Если вы хотите, чтобы элементы правильно плавали в CSS, вам нужно установить ширину их контейнера, иначе внешний контейнер получит только ширину самого большого дочернего элемента.
В вашем случае просто установите ширину для.navbar-header, и элементы отобразятся в строке.
Если вы хотите, чтобы поиск находился слева от заголовка, просто добавьте float: left to # search-icon.
Например
.navbar-header{ width:50%; }
.navbar-header #search-icon{ float:left; margin-right:30px; }
.navbar-header
без явной ширины. Как только вы дадите ему ширину, например, 300 пикселей, он будет отображаться так, как вы хотите.