Width 100% + px не работает

Question

Нужна ваша помощь с кодом. У меня есть меню. Я задаю для каждого элемента меню ширину и делаю между ними отступы. Мне нужно чтобы при приведении элемент меню заполнялся цветом с отступлением, типа как на картинке. Я использую свойство: width: calc(100% + 20px);, но это не работает. Что я делаю не так ли? Спасибо

.logo_and_menu nav div {
  width: calc(100% + 20px);
  text-align: center;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.logo_and_menu nav div:hover {
  width: calc(100% + 20px);
  background-color: #F2F3F5;
}

<div class="logo_and_menu">
  <img src="/assets/images/Canva.png">
  <nav>
    <div><a>Home</a></div>
    <div><a>Design</a></div>
    <div><a>Templates</a></div>
    <div><a>Features</a></div>
    <div><a>Learn</a></div>
    <div><a>Plans</a></div>
  </nav>

Answer 1

.items {
  display: flex;
  flex-direction: column;
  padding-left: 0;
}

.item {
  list-style: none;
}

.item:not(:last-child) {
  margin-bottom: 16px;
}

a {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 8px 16px;
  background-color: #ccc;
  text-decoration: none;
  color: #181818;
}

a:hover {
  background-color: #181818;
  color: #ccc;
}

<nav class="menu">
  <ul class="items">
    <li class="item">
      <a class="link" href="#">Ссылка</a>
    </li>
    <li class="item">
      <a class="link" href="#">Ссылка</a>
    </li>
    <li class="item">
      <a class="link" href="#">Ссылка</a>
    </li>
    <li class="item">
      <a class="link" href="#">Ссылка</a>
    </li>
    <li class="item">
      <a class="link" href="#">Ссылка</a>
    </li>
  </ul>
</nav>

Если я вас правильно понял, то можно реализовать вот так

БЛОГ НА HUSL

Width 100% + px не работает

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