按钮宽度不同HTML＆amp; CSS

Question

我的网站上的按钮有问题，它们的宽度不一样，我试过设置宽度没有结果。

CSS

.menuList{
    text-align: center;
    margin-top: 2em;
}
.lItem{
    display: inline-block;
    margin-left: 1em;
    margin-right: 1em;
    max-height: 1em;
}
.btn{
    text-decoration: none;
    color: white;
    margin: 0 auto;
    padding: 1em 4em 1em 4em;
    font-family: 'Raleway';
    border: 2px solid white;
}

HTML

<ul class="menuList">
    <li class="lItem"><a class="btn" href="#">Cooking</a></li>
    <li class="lItem"><a class="btn" href="#">Technique</a></li>
</ul>

Answer 1

CSS更改：

.menuList{
    text-align: center;
    margin-top: 2em;
}
.lItem{
    display: inline-block;
    margin-left: 1em;
    margin-right: 1em;
    line-height: 2.4em;
    max-width:184px;
    width:184px;
    border: 2px solid white;
}
.btn{
    text-decoration: none;
    color: white;
    margin: 0 auto;
    padding: 1em auto;
    font-family: 'Raleway';
}