body {
background-color: #f2f2f2;
font-family: "Futura PT", sans-serif;
-webkit-font-smoothing: antialiased;
/* для корректного отображения текста на всех экранах*/
-webkit-overflow-scrolling: touch;
/*для нормального скроллинга*/
}
.header-top {
height:40px;
background: #ffffff;
line-height:40px;
}
nav {
display:flex;
border-bottom:1px solid #ccc;
background-color: #ffffff;
width: 100%;
height: 50%;
}
nav .nav-title {
color:#686868;
font-weight: 500;
font-size: 22px;
margin-bottom: 17px;
margin-left: 68px;
margin-right: 70px;
margin-top: 22px;
}
nav .navigation {
list-style: none;
display:flex;
color: gray;
flex-grow:1;
}
nav .navigation li {
text-align: center;
font-size: 16px;
/*странно, но нижняя тень работает только так, если поставить ; она будет отображаться некорректно*/
/*margin-bottom: 11px;
margin-top: 25px;*/
margin: 0;
padding: 0;
}
nav .navigation li.selectable:hover {
box-shadow:0 -2px 0 0 #1c76bc inset;
}
nav .navigation li.left {
flex-grow:1;
text-align:right;
margin-right: 100px;
}
/* Подписаться на розсылку*/
nav .navigation a{
color: #686868;
text-decoration: none;
text-align: center;
padding: 25px 19px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>domjuristablog2</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="header-top">
Header top
</div>
</header>
<nav>
<div class="nav-title">Блог</div>
<ul class="navigation">
<li class="selectable"><a href="#">Для бізнесу</a></li>
<li class="selectable"><a href="#">Для юристів</a></li>
<li class="left"><a href="#">Підписатися на розсилку</a></li>
</ul>
</nav>
</body>
</html>