ボタンが同じ幅でないHTMLと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'; 
}