In the provided images, it is evident that the <li> element is failing to expand and is disregarding the padding of the parent
element.</p>
<p><a href="https://i.stack.imgur.com/4ZH65.png" rel="nofollow noreferrer"></a></p>
<p><a href="https://i.stack.imgur.com/l6bbv.png" rel="nofollow noreferrer"></a></p>
<p>The structure of the code is as follows:</p>
<pre><code> <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>
The CSS being used 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;
}
I am seeking an explanation as to why the <li> element is not adjusting as expected (it does not have a fixed height so it should adjust).