.container {
max-width: 1440px;
margin: 0 auto;
}
.wrapper {
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
.nav {
position: absolute;
z-index: 50;
width: 100%;
}
.nav__row {
margin-top: 45px;
display: flex;
justify-content: space-between;
}
.nav__logo {
display: flex;
color: white;
font-size: 18px;
font-weight: 900;
cursor: pointer;
}
.nav__logo:hover{
color: blue;
transition: 0.5s;
}
.nav__logo img {
margin-right: 17px;
}
.nav__menu {
/* background-color: red; */
display: flex;
flex-flow: row wrap;
}
.list__menu {
display: flex;
margin: 0;
padding: 0;
}
.link__menu:hover{
color: blue;
transition: 0.5s;
}
.btn {
width: 154px;
height: 52px;
background: white;
border: none;
border-radius: 50px;
font-weight: bold;
font-size: 15px;
letter-spacing: 4.2px;
cursor: pointer;
}
.list__menu li {
display: inline-block;
margin-right: 51px;
}
.list__menu li a {
display: inline-block;
color: white;
text-decoration: none;
padding: 10px;
}
<div class="nav">
<div class="container">
<div class="nav__row">
<div class="nav__logo center">
<img src="img/graph.svg" alt="logo">
<h2>SEO-Xpert</h2>
</div>
<div class="nav__menu">
<ul class="list__menu center">
<li class="item__menu"><a href="#" class="link__menu">Products</a></li>
<li class="item__menu"><a href="#" class="link__menu">Services</a></li>
<li class="item__menu"><a href="#" class="link__menu">Features</a></li>
<li class="item__menu"><a href="#" class="link__menu">Plans & Pricing</a></li>
<li class="item__menu"><a href="#" class="link__menu">Sign in</a></li>
</ul>
<button class="btn">SIGN UP</button>
</div>
</div>
</div>
</div>
Средний
