Хедер должен находиться по середине на горизонтальной плоскости, но съезжает влево. Как это исправить?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pricing Table</title>
<link rel="stylesheet" href="norm.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="main">
<div class="main-overlay">
<header class="header">
<div class="logo">
<img src="img/logo.png" alt="Logo" class="logo">
</div>
<nav class="menu">
<ul>
<li><a href="#" class="link">Home</a></li>
<li><a href="#" class="link">Why MISOCIAL</a></li>
<li><a href="#" class="link">Features</a></li>
<li><a href="#" class="link">Articles</a></li>
<li><a href="#" class="link">Pricing</a></li>
<li><a href="#" class="link">Get started</a></li>
</ul>
</nav>
</header>
</div>
</main>
</body>
</html>
*, *::before,*::after {
box-sizing: border-box;
}
body {
margin: 0;
}
.main {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100vh;
align-items: center;
min-height: 600px;
background: url(img/glasses.png) no-repeat center;
background-size: cover;
position: relative;
}
.main-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .75;
z-index: 0;
background-color: #ffffff;
background-image: linear-gradient(-60deg, #88d3ce 0%, #6e45e2 100%);
}
.header {
display: flex;
border: 2px solid red;
justify-content: space-between;
width: 90%;
position: relative;
z-index: 2;
}
Простой
