Ребят, столкнулся с проблемой. Когда присваиваю последнему элементу списка "Contact" (li: nth-child(5)
в этом случае) границу, то он смещается. Нужно, чтобы он был на одном уровне с другими элементами.
html,
body,
h1,
.menu {
font-family: 'Gamja Flower', cursive;
padding: 0;
margin: 0;
}
header {
background: url(Layer1.png) no-repeat center top / cover;
width: 100%;
height: 1200px;
}
header h1 {
display: inline-block;
font-weight: normal;
margin-left: 100px;
}
.menu {
display: inline-flex;
flex-flow: row wrap;
justify-content: center;
margin-left: 13.875rem;
}
.menu li {
display: inline-block;
font-weight: bold;
font-size: 22px;
margin-left: 5rem;
}
.menu li a {
text-decoration: none;
color: #000;
}
.menu li:nth-child(5) {
border: 1px solid black;
padding: 10px;
border-radius: 15px;
}
.captions {
margin-top: 15rem;
}
.main-caption {
font-weight: bold;
display: block;
margin-left: 0;
margin-top: 8.25rem;
text-align: center;
line-height: 0.5;
}
header p {
text-align: center;
color: #a2a1a1;
}
.button {
display: block;
background-color: #50007d;
padding: 15px;
color: white;
text-decoration: none;
text-align: center;
border-radius: 15px;
width: 12.8125rem;
margin: 4rem auto;
}
.mouse-icon {
margin-left: 41.25rem;
margin-top: 23.125rem;
}
.caption-under-mouse-icon {
text-align: center;
color: white;
}
<header>
<nav>
<h1><b>Interactive</b>Agency</h1>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Offer</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="captions">
<h3 class="main-caption">Lorem Ipsum Dolor Sit Amet</h1>
<p>Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</p>
<a href="#" class="button">Ask for price</a>
</div>
<img class="mouse-icon" src="icon.png">
<p class="caption-under-mouse-icon">scroll down</p>
</header>
.menu
прописатьalign-items:center;