在样式元素和：hover使用scss时遇到问题？

Question

我遇到a:hover的问题。我正在使用scss并试图使导航具有粘性，以便第一个div占据整个屏幕。我这样做是通过将导航高度设置为0，然后使内部元素带有填充。但是我似乎无法让a:hover工作或border-bottom。如果有人有解决方案，那就好了。

代码：

.nav{
display: block;
position: sticky;
background-color: transparent;
top: 0;
padding: 0;
height: 0;
width: 98vw;
font-size: 1.5rem;
z-index: 101;
&__inside{
padding: 1rem;
border-bottom: 1rem black; //not working
li {
    display: inline;
    text-align: center;
}
li + li{
    padding-left: 2rem;
}
li{
    a:hover{
        transform: scale(1.5); //not working
}}
}
}

HTML

<div class="nav">
  <div class="nav__inside">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Store</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>