Делаю горизонтальное меню с тремя элементами (лого, элементами меню и кнопкой). Не получается их выравнять в один ряд. Они располагаются друг под другом, хотя использую display: inline-block.
Подскажите, пожалуйста, что делаю не так.
Ссылка на меню
здесь.
Вот код:
.nav-container {
display: inline-block;
z-index: 10;
}
.logo {
display: inline-block;
vertical-align: top;
width: 173px;
height: 51px;
margin-top: 4px;
}
.menu {
padding: 0;
margin: 0;
list-style: none;
}
.menu li {
display: inline-block;
margin-right: 25px;
}
.btn-nav {
display: inline-block;
border: 1px solid;
width: 160px;
height: 45px;
background-color: red;
border-radius: 5px;
vertical-align: top;
text-align: center;
font-size: 0.9em;
color: #ffffff;
padding-top: 12px;
box-shadow: ;
}
Думал про float: left, но вроде должно же работать и без этого.
Средний
