Why is my CSS behaving this way?

Hello guys, fairly new to Web development, I have following questions.
I am making a project, first step is to make a navigation bar, and I think I’ already finished.
Here is my code https://jsfiddle.net/05gtnrve/
So I have two questions

  1. The hover button was not working as intended, meaning it wasn’t the background wasn’t covering the entire block of text, not until I started playing around padding
.nav li a{  
    text-decoration: none;

Anything shorter than 13px was small, more than 13px went over my red/orange border
So the question is why 13px, how did it calculate it?

Second question, I’m trying to position the blue “NSM” list in the center, but with no avail, I have tried text-align:center but it doesn’t work, any ideas?

Since you gave .nav{height:40px} and .nav li{height:40px;} and accroding to this when you gave .nav li a{padding:13px} then height of a element is equal to 40px and when you set padding less than 13px then height of a element is shorter then its parent and when you use padding larger than 13px then height of a element is larger than its parent ,so to fix this problem you need some changes, remove height:40px; property from both .nav and .nav li and add overflow:auto; property to .nav
now add display:inline-block; property to .nav li a and remove padding:10px 0px 10px 0px; property from ul.

second to position "NSM" to center of its parent set width:75%;property of the .button and width:25%; of the .logo (note :you can give width of both .button and .logo according to your requirement but be sure that sum of both width should be equal to 100%).
and give float:right; and text-align:center; to the .logo.

hope you find my answer correct.