Проблема заключается в том, что при наведении на списки с ссылками бэкграунд у хэдэра уплывает вниз, можно ли как то убрать этот сдвиг? У списка прописан ховер с нижней рамкой и паддингом вниз, вроде слышал, что есть команда, которую можно использовать вместо Padding и благодаря ему ближающие элементы затрагиваться не будут.
получается должно быть как на макете, но без сдвигов соседних элементов, а именно бэкграунда хэдэра.
<header class="header">
<nav class="nav">
<ul class="nav_list__content">
<a href=""><li class="nav_list__ul">Жилые комплексы</li></a>
<a href=""><li class="nav_list__ul">О компании</li></a>
<a href=""><li class="nav_list__ul">Контакты</li></a>
<a href=""><li class="nav_list__ul">Новости</li></a>
<a href=""><li class="nav_list__ul">Акции</li></a>
<a href=""><li class="nav_list__ul">Преимущества</li></a>
</ul>
</nav>
<div class="header_bg"><img src="img/headerbg.png" alt=""></div>
</header>
.header {
margin: 0 auto;
height: 618px;
width: 1110px;
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
}
.header a {
display: inline-block;
padding: 10px;
}
.logo {
display: flex;
justify-content: center;
padding-top: 50px;
}
.nav {
padding-top: 16px;
display: flex;
justify-content: center;
flex-direction: row;
padding-bottom: 37px;
}
.nav_list__content {
display: flex;
padding-top: 50px;
justify-content: center;
font-family: 'Roboto';
font-style: normal;
font-size: 18px;
}
.nav_list__ul {
padding-left: 10px;
padding-right: 10px;
transition: 0.8s;
}
.nav_list__ul:hover {
border-bottom: 1px #3399cc solid;
padding-bottom: 10px;
}
.header_bg {
display: flex;
align-content: center;
margin-bottom: 150px;
background: url(../img/headerbg.png);
/* background-size: 100% 100%; */
background-repeat: no-repeat;
}