Всех приветствую! Я только учусь верстать и у меня возникли

Question

Всех приветствую! Я только учусь верстать и у меня возникли

некоторые вопросы по простой вёрстке которую я делаю для того, чтобы приобрести начальное понимание.

Почему для элемента <a></a> padding выходит за пределы div?
html:
<div class="navbar">
<div class="first">
<a href="">Компания</a>
<a href="">О нас</a>
</div>
<div class="second">
<a href="">Войти</a>
<a href="">Регистрация</a>
</div>
</div>
css:
.navbar,
.first,
.second {
display: flex;
align-items: center;
color: #fefefe;
}

.navbar {
border: 1px solid black;
height: 5rem;
justify-content: space-between;
background-color: rgb(9, 9, 9);
}

.navbar a {
display: block;
padding: 100% 20px;
color: white;
text-decoration: none;
}

.navbar a:hover {
color: black;
background-color: white;
transition: .4s ease-in-out;
}