Using different browsers makes my nav bar slightly change? - html

Question

I built my website mostly checking Google chrome to make sure everything was correct. With my nav bar in Google chrome it is perfect, however, when in IE or Fire Fox the dimensions are changed and they do not fit together correctly.
My website is noahtarr.com
CSS:
nav {
margin-top: -1px;
position: relative;
top: 0;
left: 0;
}
nav a {
margin-left: -3px;
margin-right: -1px;
padding: 10px 20px;
outline: none;
border-right: none;
border-bottom: none;
font-family: arial;
font-weight: bolder;
vertical-align: top;
text-decoration: none;
font-size: 13px;
line-height: 21px;
cursor: pointer;
background-color: #D1DBBD;
color: #3E606F;
-webkit-transition: all .9s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transition: background-color .3s ease;
-moz-transition: background-color .3s ease;
-ms-transition: background-color .3s ease;
-o-transition: background-color .3s ease;
transition: background-color .3s ease;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
nav a:hover {
background-color: #91AA9D;
color:#193441;
-webkit-transition: background-color .3s ease;
-moz-transition: background-color .3s ease;
-ms-transition: background-color .3s ease;
-o-transition: background-color .3s ease;
transition: background-color .3s ease;
}
nav a:first-child {
border-radius: 6px 0 0 0px;
}
nav a:last-child {
border-radius: 0 6px 0px 0;
}
nav a.active {
color: #193441;
border-radius: 8px 8px 0px 0px;
padding-top: 5px;
}
nav a.adjacent-active-left {
border-radius: 0px 8px 0px 0px;
}
nav a.adjacent-active-right {
border-radius: 8px 0px 0px 0px;
}
HTML:
<nav>
<a class="active" href="home.htm">Home</a>
<a class="adjacent-active-right" href="about.htm">About</a>
Services
Portfolio
Contact
</nav>