html - Font displays different in Chrome and in Firefox -

i bit new when comes web development.

i have created menu buttons width different depending on browser (firefox or chrome)

in firefox, can see end of last button of menu aligned div below. can appreciate width of button 136.5px

however, in chrome fonts bolder , menu end pushed bit forward. here, width of button 139.281px

this site, menu on top: http://www.metagame.gg/champions/

this html , css code menu

	.navigator {  		margin: 0;  		padding: 0;  		display: flex;      		padding-left: 39px;  		background: #8c9baa;   	}  	.navigator li {  		display: inline-block;  		position: relative;  		z-index:100;	  	}  	.navigator li {  		text-decoration: none;  		font-size: 15px;  		display: block;  		line-height: 50px;  		padding: 2px 27.75px 0px;  		-webkit-transition: 0.2s ease-in-out 0s;  		-moz-transition: 0.2s ease-in-out 0s;  		-o-transition: 0.2s ease-in-out 0s;  		-ms-transition: 0.2s ease-in-out 0s;  		transition: 0.2s ease-in-out 0s;  	}  	.navigator li a:hover, .navigator li:hover > {  		color:#fff;  		background: #7aafd1;  	}  	.navigator ul {  		display: none;  		margin: 0;  		padding: 0;  		width: 170px;  		position: absolute;  		left: 0px;  	}  	.navigator ul li {  		display:block;  		float: none;  		background:none;  		margin:0;  		padding:0;  	}  	.navigator ul li {  		font-size:12px;  		font-weight:bold;  		display:block;  		color:#797979;  		border-left: 3px solid #ffffff;  		background: #fff;  		line-height: 42px;  		transition: 0s;  	}  	.navigator ul li a:hover, .menu ul li:hover > {  		background:#efefef;  		border-left:3px solid #83bee4;  		color: #12303d;  	}  	.navigator li:hover > ul {  		display: block;  	}  	.navigator ul ul {  		left: 149px;  		top: 0px;  	}  	#in {  		color:#fff;  		background: #7aafd1;  	}  	.sub-menu {  		border:1px solid #ddd;  		border-top:0px;  		border-left:0px;  		box-shadow: 3px 5px 5px -5px #3b3b3b;  	}  	.navigatorsecond {  		margin: 0;  		padding: 0;  		display: flex;      		padding-left: 39px;  		background: #d1d1d1 ;  	}  	.navigatorsecond li {  		display: inline-block;  		position: relative;  		z-index:80;	  	}  	.navigatorsecond li {  		font-weight:600;  		text-decoration:none;  		font-size: 13px;  		display:block;  		color:#4a4a4a;  		line-height: 40px;  		padding: 0px 35.3px;  		-webkit-transition: 0.2s ease-in-out 0s;  		-moz-transition: 0.2s ease-in-out 0s;  		-o-transition: 0.2s ease-in-out 0s;  		-ms-transition: 0.2s ease-in-out 0s;  		transition: 0.2s ease-in-out 0s;  	}  	#ini {  		color:#fff;  		background: #7aafd1;  	}  	.navigatorsecond li a:hover, .navigatorsecond li:hover > {  		color:#fff;  		background: #7aafd1;  	}  	.navigatorsecond ul {  		display: none;  		margin: 0;  		padding: 0;  		width: 170px;  		position: absolute;  		left: 0px;  	}  	.navigatorsecond ul li  {  		display:block;  		float: none;  		background:none;  		margin:0;  		padding:0;  	}  	.navigatorsecond ul li  {  		font-size:13px;  		font-weight:bold;  		display:block;  		color:#797979;  		border-left: 3px solid #ffffff;  		background: #fff;  		line-height: 42px;  		transition: 0s;  	}

    <div class="menuwrap">  	<ul class="navigator">                <li><a href="http://www.metagame.gg/">home</a></li>             		<li><a href="/champions">champions</a></li>              		<li><a href="/soloq">solo queue <img class="iconmenu" src="/icon/expandir.png" alt=""/></a>     			<ul class="sub-menu">     				<li><a href="/soloq">tier list</a></li>    				<li><a href="/soloq/tactics">basics & tactics</a></li>     				<li><a href="/soloq/psychology">psychology</a></li>     				<li><a href="/soloq/picksandbans">picks & bans</a></li>     				<li><a href="/soloq/divisions">division analysis</a></li>     			</ul>   		</li>              		<li><a href="/proscene">pro scene <img class="iconmenu" src="/icon/expandir.png" alt=""/></a>     			<ul class="sub-menu">     				<li><a href="#">sub-menu 1</a></li>    				<li><a href="#">sub-menu 2</a></li>     				<li><a href="#">sub-menu 3</a></li>     			</ul>          </li>              		<li><a href="/analysis">in-depth analysis</a></li>              		<li><a href="/statistics">statistics</a></li>            	</ul>      </div>

i think because font bit bolder in chrome , causes button width higher.

thanks in advance

update: because each browser has own font rendering engine.

---

i replicated results current sans-serif font. case occurred when changed font monospace.

i believe you're better off using non-system font. instance, wanted see happen typical google font such open sans, , found issue did not exist when using it.

by way, work on website. looks nice. ^{tsm! tsm! tsm!}