Как выровнять фон для ссылки (чтобы он был ровно вокруг нее)

Question

При наведении фон ссылки обрубается на половину.

.header {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    }

.header__inner {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
 }

.header__logo {
    margin: 50px 10px 0;
    padding-right: 50px;
     font-size: 25px;
    color: rgb(255, 255, 255);

 }

.nav {
      font-size: 20px;
     text-transform: uppercase;
}

.nav__link {
     display: inline-block;
      align-items: top;
     padding-left: 40px;
     margin: 50px 10px 0;
     color: rgb(255, 255, 255);
     text-decoration: none;
     transition: color .2s linear;
}
.nav__link:hover {
     background: black;
     color: aqua;
}

      <div class="container">
         <div class="header__inner">
            <div class="header__logo"> ARCANE</div>
              <nav class="nav">
                 <a class="nav__link" href="#">HOME</a>
                 <a class="nav__link" href="#">SERVICES</a>
                 <a class="nav__link" href="#">ABOUT</a>
                 <a class="nav__link" href="#">CONTACT</a>
                 <a class="nav__link" href="#">SING IN</a>
              </nav>
            </div>
        </div>

Answer 1

В .nav__link вместо padding-left: 40px; используйте padding с необходимыми вам цифрами:

.nav__link {
     padding: 0 20px;
}

БЛОГ НА HUSL

Как выровнять фон для ссылки (чтобы он был ровно вокруг нее)

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