下拉菜单文本未在所有下拉菜单中居中对齐

Question

正确对齐：

不正确的对齐方式：

我正在尝试对齐下拉菜单的文本。其中一些居中，其他则不在。不知道问题出在哪里。一些帮助，将不胜感激。

我尝试进入.sub-menu li a {}并将其居中放置，但这没有用。我还尝试了其他所有部分的居中对齐，但是没有任何改变这些下拉链接的方法

HTML

<nav class="menu-bar">
    <ul>
        <li class="sub-menu-parent" tab-index="0">
            <a class=active href="index.html">Home</a>
        </li>
        <li class="sub-menu-parent" tab-index="0">
            <a href="todo.html">Blog</a>
            <ul class="sub-menu">
                <li><a href="todo.html">Cat</a></li>
                <li><a href="todo.html">Blog</a></li>
                <li><a href="todo.html">Dog</a></li>
            </ul>
        </li>
        <li class="sub-menu-parent" tab-index="0">
            <a href="todo.html">Shop</a>
            <ul class="sub-menu">
                <li><a href="todo.html">Lenses</a></li>
                <li><a href="todo.html">Cases</a></li>
                <li><a href="todo.html">Travel</a></li>
                <li><a href="todo.html">Cleaning</a></li>
                <li><a href="todo.html">Extras</a></li>
            </ul>
        </li>
        <li class="sub-menu-parent" tab-index="0">
            <a href="todo.html">Login</a>
            <ul class="sub-menu">
                <li><a href="todo.html">Exsisting Member</a></li>
                <li><a href="todo.html">New Member</a></li>
            </ul>
        </li>
        <li class="sub-menu-parent" tab-index="0">
            <a href="todo.html">Contact</a>
            <ul class="sub-menu">
                <li><a href="todo.html">Customer Service</a></li>
                <li><a href="todo.html">FAQ</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

.sub-menu-parent {
position: relative;
font-family: 'Major Mono Display';
text-transform: lowercase;
background-color: black;
}

.sub-menu {
visibility: hidden;
/* hides sub-menu */
opacity: 0;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-2em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0.3s linear 0.3s, z-index 0s linear 0.01s;
}

.sub-menu-parent:focus .sub-menu, .sub-menu-parent:focus-within .sub-menu, 
.sub-menu-parent:hover .sub-menu {
visibility: visible;
/* shows sub-menu */
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;

}



body {
padding: 2%;
font-size: 125%;
}


.menu-bar a {
color: rgb(255, 255, 255);
display: block;
padding: 20px 80px;
text-decoration: none;
border: 1px solid white;
}


.menu-bar a:hover {
color: rgb(0, 0, 0);
background-color: white;
transition: ease-in 0.3s;
}


.menu-bar ul, .menu-bar ul li {
list-style-type: none;
padding: 0;
margin: 0;
}


.menu-bar>ul {
background: transparent;
text-align: center;
}

.menu-bar>ul>li {
display: inline-block;
border-left: solid 1px #aaa;
}

.menu-bar>ul>li:first-child {
border-left: none;
}

.sub-menu li a{
background: rgb(207, 207, 207);
color: black;

}

.active {
background-color: rgb(80, 80, 80)
}