<header class="header flex flex_el_center">
<img class="header__logo" width="200" height="80" src="https://upload.wikimedia.org/wikipedia/commons/8/85/Logo-Test.png">
<nav class="menu header__menu">
<ul class="menu__list list_none">
<li class="menu__item"><a class="link" href="#">Главная</a></li>
<li class="menu__item"><a class="link" href="#">Каталог товаров</a></li>
<li class="menu__item"><a class="link" href="#">Контакты</a></li>
</ul>
</nav>
</header>
* {
margin: 0;
padding: 0;
}
body {
background: #fcf3e3;
}
.header {
width: 80%;
height: 120px;
margin: 0 auto;
background: #fff;
border-radius: 15px;
}
.header__logo {
margin: 0 0 0 15px;
}
.header__menu {
margin-left: 25px;
}
.flex {
display: flex;
}
.flex_el_center {
align-items: center;
}
.list_none {
list-style: none;
}
.menu__item {
display: inline-block;
margin-right: 25px;
}
.link {
text-decoration: none;
color: #353535;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.