Jesper Andersen Jesper Andersen - 7 months ago 9
HTML Question

Button not same width HTML & CSS

I have an issue with my buttons on my website, they are not the same width, I have tried by setting a width with no result.

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

CSS CHANGES :

.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';
}
Comments