Помогите разобраться, почему объекты класса nav не выравниваются по вертикали.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<header id="header", class="header">
<div class="container">
<div class="nav">
<a href="#", class="logo">
<img src="assets/images/logo.png", width="60">
</a>
<ul class="menu">
<li>
<a href="#">
Price
</a>
</li>
<li>
<a href="#">
<img src="assets/images/menu.png", width="60"></a>
</li>
</ul>
</div>
</div>
</header>
</body>
</html>
body {
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
color: #FFFFFF;
font-size: 15px;
letter-spacing: 0.085em;
}
h1,
h2,
h3,
h4
h5,
h6 {
padding: 0;
margin: 0;
}
ul, li {
padding: 0px;
margin: 0px;
display: block;
}
header a {
color: #FFFFFF;
}
.menu {
display: flex;
margin-left: auto;
}
.menu li a {
text-decoration: none;
text-transform: uppercase;
}
.menu li {
margin-right: 32px;
}
.header {
background: url('../images/bg.png') no-repeat center top / cover;
}
.container {
width: 1170px;
margin: 0 auto;
}
.nav {
display: flex;
padding-top: 57px;
align-items: center;
}
.logo {
margin-top: 52px;
margin-right: 96px;
}
