Здравствуйте! Верстаю макет с фигмы. По задумке должно быть 4 элемента в хедере: лого, лого текст, меню и кнопка логина. Все 4 блока заключены в один flex блок и задан параметр justify-content: space-between. Но при таком расположении не возможно задать выравнивание блоков по горизонтали внутри бокса.
Задача состоит в том, чтобы блок меню находился по центру страницы. Сейчас он находится по центру между лого "GITPOD" и кнопкой LOGIN и относительно центра бокса смещён влево примерно на 40-50 пикселей.
Как сделать так чтобы блок с меню находился по центру СТРАНИЦЫ ?
HTML
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="wrapper">
<div class="header_wrapper">
<div class="header_logo">
<a href="/" class="header_logo_link">
<img class="logo" src="img/Vector.png">
</a>
</div>
<p class="logo-text">Gitpod</p>
<nav class="header_nav">
<ul class="header_list">
<li class="header_item">
<a href="#" class="header_link">Features</a></li>
<li class="header_item">
<a href="#" class="header_link">Pricing</a></li>
<li class="header_item">
<a href="#" class="header_link">Blog</a></li>
<li class="header_item">
<a href="#" class="header_link">Docs</a></li>
<li class="header_item">
<a href="#" class="header_link">Changelog</a></li>
<li class="header_item">
<a href="#" class="header_link">We're hiring'</a></li>
</ul>
</nav>
<form class="login">
<input type="submit" name="login" method="post" value="Login">
</form>
</div>
</div>
</header>
<main>
</main>
</body>
</html>
CSS
html {
box-sizing: border-box;
}
*, *::before *::after {
box-sizing: inherit;
}
.header {
}
.wrapper {
max-width: 1376px;
margin: auto;
}
.header_wrapper {
border: 2px solid black;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: auto;
}
.header_nav {
border: 2px solid red;
align-self: center;
margin: auto;
}
.header_list {
display: flex;
flex-wrap: wrap;
margin: auto;
}
.header_item {
margin-right: 48px;
list-style-type: none;
}
.header_link {
text-decoration: none;
color: #12100C;
opacity: 70%;
font-family: "Roboto", sans-serif;
font-size: 16px;
line-height: 24px;
}
.logo {
border: 2px solid black;
vertical-align: middle;
}
.logo-text {
border: 2px solid black;
display: inline-block;
font-family: "Arial", sans-serif;
font-weight: 700;
padding-left: 10px;
}
body {
padding: 0px 32px;
background: #F5F3F4;
}
.login {
margin-right: 20px;
}
