How do I make the whole area of a list item in my navigation bar, clickable as a link?

Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.

Define your anchor tag css property as:

{display:block}

Then the anchor will occupy the entire list area, so your click will work in the empty space next to your list.

Make the anchor tag contain the padding rather than the li. This way, it will take up all the area.