если указываете ul то надо и написать и li. ul это список чего-то. А li это ячейка этого списка. Поэтому li и ul неотъямлемые части. Чтобы выставиль блоки в одну линию надо задать блокам свойство display, display: block или display: inline-block. Если использоваь display: block то надо задать дополнительно float: left, или же float: right. Но при свойстве float есть подводные камни, поэтому лучше использовать display: inline-block, здесь float не надо указывать. И никогда не задавайте длинну в пискселях, или в em, то шо при адаптивной вёрстке, т.е. при подгонке под размеры моб. устройств, будет шо попало.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/header__main-page.css">
<link rel="stylesheet" href="body.css">
<title>Lorna Shore</title>
<style>
body {
margin: 0;
width: 100%;
}
header {
display: block;
width: 90%;
text-align: center;
margin: 0 auto;
padding: 10px 20px;
}
nav {
display: inline-block;
position: relative;
width: 80%;
text-align: center;
vertical-align: top;
margin: 0 auto;
}
.logo__header {
width: 7%;
text-align: left;
display: inline-block;
}
.logo__header a {
width: 80%;
display: block;
}
ul {
padding: 0;
margin: 0;
vertical-align: top;
display: inline-block;
list-style-type: none;
}
.nav-center {
width: 30%;
margin: 0 20px;
display: inline-block;
}
.account-button__header {
width: 5%;
text-align: right;
display: inline-block;
}
.account-button__header a {
width: 70%;
display: block;
}
img {
width: 100%;
display: block;
}
.left-nav__header {
width: 25%;
}
.right-nav__header {
width: 30%;
}
.left-nav__header li {
display: inline-block;
list-style-type: none;
width: 40%;
vertical-align: top;
margin-left: 10px;
}
.right-nav__header li {
display: inline-block;
list-style-type: none;
width: 28%;
vertical-align: top;
margin-left: 10px;
}</style>
</head>
<body>
<header>
<div class="logo__header"><a href="#"><img src="https://i.ibb.co.com/KFYwpxb/logo-Lorna-Shore.png" alt="logo"></a></div>
<nav class="nav">
<ul class="left-nav__header">
<li><a href="#"><img src="https://i.ibb.co.com/qNnh7Sy/SHOP.png" alt="shop"></a></li>
<li><a href="#"><img src="https://i.ibb.co.com/W0zrw15/Concert-tours.png" alt="concert tours"></a></li></ul>
<a class="nav-center" href="#"><img src="https://i.ibb.co.com/5TzzSMB/News.png" alt="news"></a>
<ul class="right-nav__header">
<li><a href="#"><img src="https://i.ibb.co.com/5TzzSMB/News.png" alt="news"></a></li>
<li><a href="#"><img src="https://i.ibb.co.com/5W5Q8L4/About.png" alt="about"></a></li>
<li><a href="#"><img class="contact-nav__header" src="https://i.ibb.co.com/Bt6jFP6/Contact.png" alt="contact"></a></li></ul></nav>
<div class="account-button__header"><a href="#"><img src="https://i.ibb.co.com/tKTFL2M/account-icon.png" alt="account"></a></div></header>
</body>
</html>
Простой
