I am working on creating a horizontal navigation bar that resembles link [1], but it currently looks more like link [2]. How can I adjust my code to achieve the desired look? The wrapper's width is set at 80em and each link should be 155x76px. Whenever I convert these dimensions to em, the size appears smaller than expected. I still need some practice with calculating in em units.
Thank you for your help!
[1] [2]
.menuarea {
border: 0.08em solid #080;
background-color: #81898e;
}
.menulist{
text-align:center;
}
.menulist li{
display:inline-block;
text-align:center;
padding: 1em 2em;
background-color:#d9b607;
margin: 0 1.100em;
}
.menulist li:hover {background-color:black;}
.menulist li a:active {color:#d9b607;}
.menulist li:active {background-color:81898e;}
<nav class="menuarea">
<ul class="menulist">
<li>
<a href="index(2).html">the beatles</a>
</li>
<li>
<a href="john.html">john</a>
</li>
<li>
<a href="paul.html">paul</a>
</li>
<li>
<a href="george.html">george</a>
</li>
<li>
<a href="ringo.html">ringo</a>
</li>
</ul>
</nav>