the problem with your code is that you dont set a width for the li items , and that causes the li width to be default.

CSS

 *{
padding:0;
margin:0;
box-sizing:border-box;
}

.nav {
  list-style-type: none;
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items:flex-start;
  padding:22px 0px;
}

.nav li{
width:calc(100% / 5);
display:flex;
justify-content:center;
align-items:center;
}

li:hover {
  font-weight: bold;
}

I prepared a js fiddle for you , you can read it , i will also give you some resources to understand further.

JS Fiddle : https://jsfiddle.net/w2dsjfhL/

Css Reset : https://en.wikipedia.org/wiki/Reset_style_sheet

Display flex : https://developer.mozilla.org/en-US/docs/Web/CSS/display

Cheers!