Я пытаюсь создать этот верхний заголовок, используя flexbox.
В принципе, я хотел бы <div class="header-title">
(учреждение 1) на линии с тремя другими элементами, которые вы видите. (Institutioner, Ledere и Log ud), как вы видите на изображении.
.nav {
background: #e1e1e1;
}
ol, ul {
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.header-title {
justify-content: center;
align-self: center;
display: flex;
}
.nav ul li.logout {
margin-left: auto;
}
.nav ul li a {
text-decoration: none;
padding: 0px 20px;
font-weight: 600;
}
<div class="nav mobilenav">
<div class="header-title">
Institution institution 1
</div>
<ul>
<li><a href="/institutions/">Institutioner</a></li>
<li>
<a href="/leaders/">Ledere</a>
</li>
<li class="logout">
<a class="button-dark" href="/user/logout">Log ud</a>
</li>
</ul>
</div>