Yo lo que veo asi nomas de 'pasada' en el firefox... en tu link de github:
tienes un <nav> y dentro un <boton> y un <ul> (menu)
(imagen adjunta 1)
<nav>
<button></button>
<ul class="main-menu"></ul>
</nav>
<nav> no tiene width por que toma la medida de <body> 800px, tiene margin: 0 auto entonces sera un 'rectangulo' de 800px centrado.
pero con justify-content: space-between; ...<boton> se va a un lado y <ul> para el otro lado.
<boton> no se ve el icono
<ul> tiene width: 100%; entonces medira lo mismo que <nav> y <body> ... 800px
Cuando se reduce o detecta menos de 768px con
@Media screen and (min-width: 769px) 'aplica' un display: flex; a .main-menu que es <ul>
(no cambia en nada)
Pero ...
Cuando se reduce o detecta menos de 767px con
@Media only screen and (max-width: 768px)
que es lo que hace?
con position: absolute; y top: 40px; left: 0; ... se 'sale' de posicion 'deja' a <nav> arriba y toma 40px de distancia de arriba y se supone que con left se alinea a la izquierda pero como tiene width: 100% pues abarca todo y no se nota
(imagen adjunta 2)
En resumen
Con ese link de github, visto en firefox: <ul> a los 767px 'toma' con position: absolute la izquierda y 40px de distancia de arriba y 100% de ancho y ... esto lo que hace