всем привет нужна помощь в верстке шапки что то не получается сверстать(
примерно что получилось html
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/css/style.css">
<title>Just</title>
</head>
<body>
<header class="header">
<nav class="main_menu">
<ul>
<div class="main_menu-left">
<li><a href="#">Караганда</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Помощь</a></li>
</div>
<!-- /.main_menu-left -->
<div class="main_menu-center">
<input type="text" placeholder='Услуги и салоны'>
</div>
<!-- /.main_menu-center -->
<div class="main_menu-right">
<li><a href="#">Регистрация</a></li>
<li><a href="#">Вход</a></li>
</div>
<!-- /.main_menu-right -->
</ul>
</nav>
<!-- /.main_menu -->
</header>
<!-- /.header -->
</body>
</html>
css
Код:
@font-face {
font-family: 'Rounded Elegance Regular';
src: url("../fonts/RoundedElegance-Regular.eot");
src: url("../fonts/RoundedElegance-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/RoundedElegance-Regular.woff") format("woff"), url("../fonts/RoundedElegance-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'COCOMAT Light';
src: url("../fonts/COCOMAT-Light.eot");
src: url("../fonts/COCOMAT-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/COCOMAT-Light.woff") format("woff"), url("../fonts/COCOMAT-Light.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'COCOMAT Regular';
src: url("../fonts/COCOMAT.eot");
src: url("../fonts/COCOMAT.eot?#iefix") format("embedded-opentype"), url("../fonts/COCOMAT.woff") format("woff"), url("../fonts/COCOMAT.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
}
body {
max-width: 1920px;
font-family: 'Rounded Elegance Regular', sans-serif;
}
header {
max-width: 1886px;
margin: 0 auto;
}
.container {
max-width: 1670px;
margin: 0 auto;
}
.main_menu {
height: 72px;
background: #fff;
}
.main_menu li {
padding-bottom: 27px;
padding-top: 27px;
}
.main_menu-center {
margin-left: 287px;
}
.main_menu-left {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.main_menu-left li:first-child {
margin-left: 0px;
}
.main_menu-left li {
margin-left: 80px;
}
.main_menu-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: 300px;
}
.main_menu-right li:first-child {
margin-left: 0px;
}
.main_menu-right li {
padding: 27px 30px;
border-left: 1px solid #dadada;
margin-left: 80px;
margin-right: 50px;
}
.main_menu ul {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 20px;
font-weight: 400;
}
не получается как в макете( монитор 1366 визуально не вижу( помогите плиз