Need assistance with solving this issue. I am trying to make the <li> elements take up the full size of the <ul> (currently there is some space on the right side). One approach I have considered is removing the right padding from the <ul> (not sure how to do that) and then setting the width of each <li> or calculating it based on the total width of the <ul> divided by 5. However, I don't think this method is quite right because even if I can get it to fit, it may not be a perfect fit. Apologies for any language mistakes in my explanation.
ul {
padding: 0;
width: 70%;
height: 50px;
border: 1px solid;
}
li {
height: 100%;
width: 100px;
display: inline-block;
border: 1px solid;
}
li a {
box-sizing: border-box;
padding-top: 13px;
height: 100%;
text-align: center;
display: block;
border: 1px solid;
}<ul>
<li><a href="#">Click</a></li>
<li><a href="#">Click</a></li>
<li><a href="#">Click</a></li>
<li><a href="#">Click</a></li>
<li><a href="#">Click</a></li>
</ul>If anyone could offer guidance and correct any mistakes, it would be greatly appreciated. Thank you!