垂直导航栏上的锚点未正确对齐

Question

似乎锚被固定在垂直导航的左侧，但仅适用于第二个元素++，第一个元素工作正常。当我将光标移动到最左侧（空白区域）时，它会突出显示链接并能够单击它。仍然不知道是什么原因造成的。

我已经为我网站的某个部分制作了一个布局页面，它为带有导航点列表的垂直导航侧边栏留出了空间。它仍然固定在左侧。我让这个侧栏上的锚点正常工作没有问题，但是一旦我开始设置它们的样式（例如，文本右对齐或字体大小更改），链接的锚点仍然卡在左侧或不能工作过去后者列表中的第一项。

.left-sidebar{

  position:fixed;
  top:auto;
  left:0;
  width:20%;
  height:100%;
  background-color: #3d2c2e;
  list-style-type: none;
  overflow: auto;
}

.left-sidebar ul{

    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: JosefinSans-Light;
}

.left-sidebar li a{
    display: inline-block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
    color: white;
}

.left-sidebar li{
    font-size: 30px;
    text-align: right;
    margin-bottom: 10px;
}


.left-sidebar li a.active{

    color: white;
}

.left-sidebar li a:hover:not(.active){
    background-color: #555;
    color:white;
}

如果这是一个初学者问题，请原谅，CSS 不是我的强项，从昨晚开始就一直在尝试寻找解决方案。提前致谢。

编辑 HTML：

<div class="left-sidebar">
     <ul>
         <li><a href="#">item1</a></li>
         <li><a href="#">item2</a></li>
         <li><a href="#">item3</a></li>
     </ul>
</div>

编辑 2： 我正在使用 ASP.NET MVC 5 创建布局，方法是将主布局复制粘贴到特定布局中并添加到上面的 div 中。两个布局中没有相同的 css 属性。

编辑 3： 我从 layout1 中删除了所有复制的代码，并将其替换为页面顶部的剃刀布局表达式。仍然无法正常工作。

Answer 1

.left-sidebar li a{
    display: inline-block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
    color: white;
    width: 100%;
}

在list(li)类型中的anchor(a)标签上使用width: 100%;