как изменить размер видимой области

Question

Как отобразить тоже самое на моей верстке. Мне нужно что бы область наведения была такого же размера. какие свойства применить 1.

 .logo ul{
    width: 400px;
    display: inline-block;
    float: right;
    word-spacing: 20px;
}
.logo ul li{
    display: inline;
}
.logo ul li:hover{
    background-color:#643a79 ;

}
.logo ul li a{
    text-decoration: none;
    color: white;
    font-family: Myriad Pro;
    
}

Answer 1

.items {
  display: flex;
  list-style: none;
  padding-left: 0;
}

.item {
  padding: 8px 16px;
  color: #181818;
  background-color: transparent;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
}

.item:hover {
  color: #ccc;
  background-color: #181818;
}

.item:not(:last-child) {
  margin-right: 8px;
}

<ul class='items'>
    <li class='item'>Hello world!</li>
    <li class='item'>Hello world!</li>
    <li class='item'>Hello world!</li>
    <li class='item'>Hello world!</li>
</ul>

Расширяй через padding, а отступы через margin

Answer 2

Изменить в .logo ul li display: inline на display: inline-block и добавить нужный паддинг, например

.logo ul li {
    display: inline-block;
    padding: 5px;
}

БЛОГ НА HUSL

как изменить размер видимой области

Ответы (2 шт):