Нужно, чтобы элементы li
были такого же размера, как и элементы a
, но они почему-то шире на несколько пикселей. Более того, почему-то ul
тоже больше li
на то же самое количество пикселей. Как это исправить?
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
* {
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
color: #000!important;
background: #fff;
overflow: hidden;
}
a:hover {
text-decoration: none!important;
}
.pricheta {
color: #007bff!important;
}
.navigation {
width: 100%;
border-bottom: 1px solid #007bff;
}
.navigation .pricheta-logo {
display: inline-block;
font-size: 20px;
padding: 15px 20px;
}
.navigation>.menu-icon {
font-size: 56px;
color: #00b7ff!important;
position: absolute;
top: 0;
right: 50px;
cursor: pointer;
display: block;
display: none;
}
.navigation>.navigation-list {
display: inline-block;
list-style-type: none;
margin: 0;
}
.navigation>.navigation-list>.navigation-item {
display: inline-block;
}
.navigation>.navigation-list>.navigation-item>a {
display: inline-block;
font-size: 20px;
padding: 15px 20px;
}
.navigation>.navigation-list>.navigation-item>.navigation-link:hover {
background: #00b7ff;
color: #fff!important;
}
<header class="header">
<nav class="navigation bg-white">
<a class="pricheta-logo pricheta" href="#">pricheta</a>
<i class="menu-icon fa fa-bars"></i>
<ul class="navigation-list">
<li class="navigation-item"><a class="navigation-link" href="#">Портфолию работ</a></li>
<li class="navigation-item"><a class="navigation-link" href="#">Примеры виджетов</a></li>
<li class="navigation-item"><a class="navigation-link" href="#">Резюме</a></li>
<li class="navigation-item"><a class="navigation-link" href="#">Связаться со мной</a></li>
</ul>
</nav>
</header>
<li>
в пробел. Так как у меня при наведении задний фон меняется, это критично. Комментарии спасают. Снизу скриншот, чтобы понять, о чем я говорю ibb.co/r6ZKK6q Можете сами удалить комментарии и посмотреть