Why does my anchor padding go beyond the parent list item?

Question

As you can see from the images the <li> element is NOT expanding and is ignoring the padding of the element.

The code structure is

    <nav class="main-nav">
        <ul class="main-nav__items">
            <li class="main-nav__item">
                <a href="">Packages</a>
            </li>
            <li class="main-nav__item">
                <a href="">Customers</a>
            </li>
            <li class="main-nav__item main-nav__item--cta">
                <a href="">Start Hosting</a>
            </li>
        </ul>
    </nav>

CSS is:

.main-nav {
  display: none;
}

.main-nav__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav__item {
  display: inline-block;
  margin: 0 1rem;
}

.main-nav__item a,
.mobile-nav__item a {
  text-decoration: none;
  color: #0e4f1f;
  font-weight: bold;
  padding: 0.2rem 0;
}

Can someone explain why <li> is not adjusting (it doesnt have some fixed height so it should adjust).

Answer 1

The parent doesn't adjust to the padding because the <a> element is an INLINE element. So the parent ignores its padding.

Simple fix: turn the inline element into inline-block element with:

.main-nav__item--cta a{
    display: inline-block
 }

After that the parent will adjust to the padding