Мне необходимо разместить два горизонтальных списка друг над другом, уже целый день голову ломаю. Они у меня ведут себя как угодно, но только не становятся как надо.
.menu {
display: inline;
align-items: flex-start;
}
.menu-list {
display: inline;
font-family: 'Roboto', serif;
padding-right: 68px;
}
.contacts {
display: inline;
align-items: flex-end;
}
.contact-info {
display: inline-block;
margin-left: 40px;
}/*текст, выделенный жирным шрифтом*/
Вот html:
<header class="header">
<div class="logo">
<img src="/img/logo.svg" alt="logo">
</div>
<div class="logo-text">
<h1>BuhOne</h1>
</div>
<ul class="menu">
<li class="menu-list">ГЛАВНАЯ</li>
<li class="menu-list">УСЛУГИ</li>
<li class="menu-list">КЛИЕНТЫ</li>
<li class="menu-list">О КОМПАНИИ</li>
<li class="menu-list">КОНТАКТЫ</li>
</ul>
<ul class="contacts">
<li class="contact-info">
<img src="/img/phone.svg" alt="phone" class="contact-image"> 8 (111) 222-33-44
</li>
<li class="contact-info">
<img src="/img/clock.svg" alt="clock" class="contact-image"> Пн-Пт 10:00-18:00
</li>
<li class="contact-info">
<img src="/img/mail.svg" alt="mail" class="contact-image"> order@buhone.ru
</li>
<li class="contact-info">
<img src="/img/gps (1).svg" alt="" class="contact-image"> Невский пр. 130
</li>
</ul>
</header>
Есть лого, она слева, а эти два списка должны быть в правой части сайта.