Navigation is not displayed as a row

1

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?

2

because each anchor is taking up 100% width, try display: inline-block
here’s a good ref: http://cssreference.io/property/display/

3

Thanks!
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.
Ideas?

4

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

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>
</div>
  1. float your anchors instead of using inline-block
  a {float: left;}