Navigation is not displayed as a row

I created a navigation bar and would like that it will be horizontal and also that the whole links area will be clickable.
So I added a to the CSS .navigation a{ - display:block}, but then the menu appear vertical instead of horizontal and still not all the links area in clickable.

Can you explain why?

because each anchor is taking up 100% width, try display: inline-block
here’s a good ref:

It did solve half of the problem.
Now the menu is vertical but still not all the area of the menu is clickable, meaning between the menu item there’s a gap where the mouse icon changes.

The browser adds spaces between elements displayed inline and inline-block , just like it adds spaces between words.

aside from hacking the margins and font size, here are other options:

  1. use css flex properties of your list’s parent directly on the list (remove the excess div)
<div class="navigation">  
  <a href="">Portfolio</a>
  <a href="">About</a>
  <a href="">Contact</a>
  1. float your anchors instead of using inline-block
  a {float: left;}