What I want is for the whole area to be clickable. For that I would need to set padding of the anchor elements. However, just adding something like `ul li a{padding: 15px 15px;}` feels wrong to me, since on a FullHD screen I won't be able to cover the space in between `<li>` elements. How do I set the padding so that the `anchor` is effectively centered inside its parent `li` element?

I was thinking about using `ul{text-align:center;}`, but I couldn't think of a way to make them take maximum space and rearrange on resizing as nicely as `text-align:justify;` does.

What I have in mind as a goal is the following structure, kept same even with screen resizing:

|---------------------------------------------------------------------------------------------------------------------------------| |---------Services---------|----------Products---------|----------Contact us----------|----------Webstore----------| |---------------------------------------------------------------------------------------------------------------------------------|
Where the all of the area in between `|` is essentially padding - affected by background-color, clickable. 

I want to use CSS/HTML without JS. Here is what I currently have: [JSFiddle](https://jsfiddle.net/z1v1wfnb/). While view on smaller screens could be dealt with better, it is not crucial enough.

Any kind of advice would be appreciated. I have looked over a lot of questions and answers, but couldn't find a solution combining the things that I have.