Как сделать список li полностью ссылкой?

Подскажите новичку. Не могу додуматься. Как сделать что бы блок ссылки охватывал весь тег "li"? проблема в паддинге который есть у "li". Если его применять к тегу "a", то внешний вид меняется и не все надписи помещаются, а так получается, что паддинг создает отступ, в котором ссылка не работает. Можно как-то при таком же внешнем виде, сделать, что бы ссылка охватывала весь элемент "li", при этом сохраняя адаптивность? Прошу прощение за безграмотность, первый тут мой вопрос =)

\Так выглядит при паддинге в "li", красиво, но ссылка охватывает не весь блок

\А так выглядит, если отступ указывать сразу ссылке тегу "a", охватывает весь блок "li", но выглядит не правильно

\HTML\

<ul class="menu_list">
                           <li class="menu_element"><a href="#">главная</a></li>
                           <li class="menu_element"><a href="#">структура</a></li>
                           <li class="menu_element"><a href="#">документы</a></li>
                           <li class="menu_element"><a href="#">информация</a></li>
                           <li class="menu_element"><a href="#">контакты</a></li>
                           <li class="menu_element text-uppercase"><a href="#">гто</a></li>
                           <li class="menu_element"><a href="#">афиша</a></li>
                           <li class="menu_element"><a href="#">новости</a></li>
                        </ul>

\CSS\

.menu {
  background-color: #0000ff;
}

.menu_list {
  width: 96%;
  min-height: 90px;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 2%;
  gap: 5px;
}

.menu_element {
  width: 100%;
  text-align: center;
  font-size: 20px;
  outline: 1px solid #3382ff;
  text-transform: capitalize;
  background-color: #0000b3;
  border-radius: 50px;
  padding: 1%;
}

.menu_element > a {
  display: block;
  width: 100%;
  padding: 3%;
  text-decoration: none;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-weight: 300;
}

.menu_element:hover {
  background-color: #000066;
  outline: 1px solid #000066;
  cursor: pointer;
}

\Если стилизовать < a > , то текст выталкивается.

я убрал padding из ".menu_element" и добавил padding к < a > не в %, а в px. Стало получше, но интересно, можно сделать по другому, что бы работало в % ?