为什么菜单中的文本向右移动？

Question

我目前正在为我的Wordpress网站设置侧边栏菜单。我遇到了2个问题。第一个是菜单中的文本未正确排列在左侧。我尝试使用text-align属性，但是它不起作用。

第二个问题是菜单的底部有一些随机空间，我不知道为什么会有。

问题在这里发生：http://dreamedbig.com/our-services/

我的HTML / PHP：

<div class="page-content">
 <div id="services-menu" class="services-sidebar">
    <?php dynamic_sidebar('services'); ?>
</div>
</div>

CSS：

#services-menu {
    border: 1px solid black;
    align-items: left;
    float:left;
    height: auto;
    display: inline-block;
    top:0;
    left:0;
    background-color: #BCE6FB;
}

#services-menu li{
    list-style-type:none;
    border-bottom: 1px solid black;
}

#services-menu a {
    text-decoration: none;
    color: #08203D;
}

#services-menu ul {
}

#services-menu ul li a {
    position: relative;
    display: block;
    box-sizing: border-box;
    z-index: 1;
    margin: 5px;
    padding-left:   5px;
    padding-right: 5px;
}

#services-menu ul li a::after
{
    content: "";
    position: absolute;
    top:0;
    left: 0;
    background-color: #00A2DA;
    width: 0%;
    height: 100%;
    transition: all 1s;
    z-index: -1;
}

#services-menu ul li a:hover::after
{
    width: 100%;
}

#services-menu ul li:nth-child(odd) a::after
{
    background-color: #00A2DA;
}

#services-menu ul li:nth-child(even) a::after
{
    background-color: #FFFFFF;
}

Answer 1

似乎您从名为.widget的类继承了一些样式，并且在ul中添加了空白和填充。这很常见，是因为您使用的是WordPress或某些样式表附带的下划线。

我认为这些样式会更正

.widget, #services-menu ul{
  margin:0;
  padding:0;
}

我在chrome浏览器中使用inspect发现了多余的边距和填充。我强烈建议将其用于前端样式，因为它使对此类问题进行故障排除更容易解决。

Here is an article to better explain how it works