Верстаю макет, и столкнулся с проблемой выравнивания <span class="caption"><sup>El</sup>Artista</span>
в один ряд с навигационными ссылками.
Как ни старался, не получается. Надеюсь на вашу помощь! Заранее благодарю.
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.header {
background: url("../images/header-img.png") no-repeat center top/cover;
height: 700px;
}
.header .caption {
color: #bb1b55;
margin-top: 0;
font-size: 3rem;
font-family: "SCRIPTIN";
}
.header .menu {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-left: 41%;
padding-top: 50px;
font-family: "Titillium Web", sans-serif;
}
.header .menu a {
text-decoration: none;
color: #000;
}
.header .menu li {
list-style-type: none;
text-transform: uppercase;
}
.header .container {
margin: 150px auto;
text-align: center;
}
.header .container h1 {
font-family: "SCRIPTIN";
font-size: 5rem;
color: #bb1b55;
font-weight: 100;
}
.header .btn {
display: block;
padding: 15px;
border-radius: 15px;
text-decoration: none;
font-family: 'Titillium Web', sans-serif;
margin: 0 auto;
text-align: center;
background: linear-gradient(55deg, #f75644 1%, #a0015d 99%);
width: 150px;
color: #fff;
}
<header class="header">
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Idea</a></li>
<li><a href="#">Crew</a></li>
<li><a href="#">Benefits</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Showreel</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<span class="caption"><sup>El</sup>Artista</span>
<div class="container">
<h1 class="big-caption">Catching the spirit</h1>
</div>
<a class="btn" href="#">Contact us</a>
</header>