Make a link have 100% width

To make the link fill out all available space, you can use flexbox:

li {
    display: flex;
}
li > a { 
    flex: 1;
}

I agree with Scott, but I would recommend this code instead:

a {
    display: inline-block;
    width: 100%;
}

or this code:

<ul>
    <li><a href="topage" style="display: inline-block">text</a></li>
</ul>

I recommend display: inline-block because display: block makes the <a> element appear in its line. (Both will be fine in this case, but not in all cases)

Edit: It seems that width:100% was not referenced. Thanks to @LGSon for commenting out!

Add display: block to your a element.

item {display:flex;} item a {flex:none;}