Html 区分菜单中的最后一个元素

我的菜单有问题。我想为我的最后一个li元素添加更多样式。我想添加一些背景色。我试着用填充物来填充，但看看发生了什么。一切都是碰撞标志和电话号码：

我也试着用box shadow来实现这一点，但我必须改变每个断点上的参数。有没有什么通用的解决办法

<div class="topbar">
            <div class="logo">
                <img src="img/logo.png" alt="Wapik" class="logo-image">
                <img src="img/phone.png" alt="Phone" class="phone">
                <span>+62 202 555 0117</span>
            </div>
            <div class="navbar-toggle">
                <i class="fas fa-bars"></i>
            </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Contact us</a></li>
                    <li><a href="#">Get started</a></li>
                </ul>
            </nav>
        </div>

尝试添加

box-sizing: border-box;

---

给你的海军。否则，我建议您为a元素设置边距，而不是使用填充，或者如果您需要更多控制，请将所有ul>li的高度设置为100%，并使用flexbox将a居中。

寻求代码帮助的问题必须包含在问题本身中复制所需的最短代码，最好是在a中。请参阅可能的副本

box-sizing: border-box;