Когда я верстаю сайт без выравнивания надписей в блоке меню в шапке - всё отображается так, как это мне нужно. Само меню шапки серого цвета. Вот код сайта и его внешний вид.
.container .head .logo {
position: relative;
height: 120px;
width: 120px;
float: left;
display: inline-block;
}
.container .head .menu {
position: relative;
height: 120px;
width: 60%;
background: grey;
display: inline-block;
padding-left: 10px;
margin-left: 10%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Страница 2</title>
<link rel="stylesheet" type="text/css" href="page3.css">
<link rel="shortcut icon" type="image/png" href="favicon.png" />
</head>
<body>
<div class="container">
<div class="head">
<div class="logo">
<img src="logo.png" width="100%" height="100%">
</div>
<div class="menu">
<h3>Проекты</h3>
<h3>Слайды</h3>
<h3>Контакты</h3>
</div>
</div>
</div>
</body>
</html>
Однако когда я решаю применить выравнивание записей по горизонтали - блок меню съезжает куда-то вниз. Вот код
.container .head .logo {
position: relative;
/* float: left; */
height: 120px;
width: 120px;
display: inline-block;
}
.container .head .menu {
position: relative;
height: 120px;
width: 60%;
background: grey;
display: inline-block;
padding-left: 10px;
margin-left: 10%;
}
.container .head .menu h3 {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Страница 2</title>
<link rel="stylesheet" type="text/css" href="page3.css">
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
</head>
<body>
<div class="container">
<div class="head">
<div class="logo">
<img src="logo.png" width="100%" height="100%">
</div>
<div class="menu">
<h3>Проекты</h3>
<h3>Слайды</h3>
<h3>Контакты</h3>
</div>
</div>
</div>
</body>
</html>
Что это такое? Как решить данную проблему? Буду благодарен за любые конструктивные подсказки.