Html 垂直导航栏上的定位未正确对齐

看起来锚点被固定在垂直导航的左侧，但仅对于第二个元素++，第一个元素工作正常。当我将光标移动到最左侧（空白）时，它会高亮显示链接并能够单击它。仍然不知道这是什么原因。

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

.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.NETMVC5创建布局，方法是将主布局复制粘贴到特定布局中，并添加到上面的div中。两个布局中没有相同的css属性

编辑3： 我从layout1中删除了所有复制的代码，并在页面顶部用razor布局表达式替换了它。仍然没有发挥应有的作用

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

使用

宽度：100%到列表中的锚定（a）标记（li）类型

使用
宽度：100%
到列表中的锚定（a）标记（li）类型
也更新HTML代码。@RiotZeastCaptain这只是一个简单的div atm，请参阅更新。您不能在此处或在fiddle中复制错误吗？@John，在那里效果很好。@choz我在上面的评论中附加了一个fiddle，但它没有复制错误：\n也更新HTML代码。@RiotZeastCaptain这只是一个简单的div atm，请参阅更新。您不能在此处或在fiddle中复制错误吗？@John，在此处效果很好。@choz我在上面的评论中附加了一个fiddle，但它没有复制错误：\n很抱歉，这也不起作用。有关更多详细信息，请参阅我的第二次编辑；文本对齐：右；`在列表中的锚中使用此css仍然不走运。令人沮丧的。第一个元素可以正常工作，但其余元素将无法工作，除非将光标一直向左移动。确切的问题是什么？在我的div中，我有一个无序列表，其中有3个项目，由列表标记和锚定标记包围。当我的css中没有与文本对齐或字体大小相关的内容时，前两个可以正常工作（突出显示并能够通过行而不仅仅是文本单击链接），但最后一个只在光标悬停在文本（而不是整行）上时突出显示。这是问题一。但我不能这样做，我需要它们正确对齐，字体大小达到30px。如果我这样做，第一项工作正常（突出显示并能够通过行而不仅仅是文本单击链接），但其他两项根本不工作。很抱歉，这也不工作。有关更多详细信息，请参阅我的第二次编辑；文本对齐：右；`在列表中的锚中使用此css仍然不走运。令人沮丧的。第一个元素可以正常工作，但其余元素将无法工作，除非将光标一直向左移动。确切的问题是什么？在我的div中，我有一个无序列表，其中有3个项目，由列表标记和锚定标记包围。当我的css中没有与文本对齐或字体大小相关的内容时，前两个可以正常工作（突出显示并能够通过行而不仅仅是文本单击链接），但最后一个只在光标悬停在文本（而不是整行）上时突出显示。这是问题一。但我不能这样做，我需要它们正确对齐，字体大小达到30px。如果我这样做，第一项工作正常（突出显示并能够单击行链接，而不仅仅是文本），但其他两项根本不工作。