I'm relatively new to the world of web development and have encountered an issue with a menu I created. The buttons in the menu have varying widths depending on the browser being used – Firefox or Chrome.
In Firefox, the last button in the menu lines up perfectly with the div below it. The width of the button measures 136.5px: https://i.stack.imgur.com/xC2Js.png
However, when viewed in Chrome, the fonts appear bolder which shifts the end of the menu slightly forward. Here, the width of the button is 139.281px: https://i.stack.imgur.com/ksvdv.png
You can view the site with the menu at the top here:
Below is the HTML and CSS code for the menu:
.navigator {
margin: 0;
padding: 0;
display: flex;
padding-left: 39px;
background: #8C9BAA;
}
.navigator li {
... (CSS code continues)
<div class="menuWrap">
<ul class="navigator">
<li><a href="http://www.metagame.gg/">HOME</a></li>
... (HTML code continues)
</ul>
</div>The discrepancy in button width between browsers seems to be caused by the font rendering slightly differently in Chrome, resulting in the boldness affecting the overall width.
Appreciate any help or insights. Thanks!