Confusion in one property of freecodecamp's personal portfolio sample project

#1

I was going through the personal portfolio sample project of freecodecamp. I am confused about one line of a CSS property.

.nav-list a {
  display: block; /*here*/
  font-size: 2.2rem;
  padding: 2rem;
}

Element is behaving normally when the display: block; property is enabled. But when I remove the element. It behaves differently.

image

This is how it changes after removing the property.
I am unable to get why is this happening. What exactly display: block does here.

#2

I’m no CSS wizard, but I think the inherent display: block of the a is getting overridden by the previous display: flex from a parent component or the the inherent display: list-item from the li. Stating it explicitly just makes it clear what you want.

#3