En-tête chevauche ma barre de défilement HTML/CSS

Question

J'essaie d'avoir mon en-tête/barre de navigation fixe en haut, mais pour cette raison, le côté droit de l'en-tête chevauche la barre de défilement. J'ai trouvé une sorte de correction temporaire en chantant la largeur de l'en-tête à 99,2%, mais cela resterait un problème lors de l'inspection. Voici mon CSS pour l'en-tête/nav:

header { 
    overflow: hidden; 
    z-index: 100; 
    position: fixed; 
    width: 100%; 
    top: 0; 
    right: 0; 
    left: 0; 
    background-color: #fff 
} 
nav { 
    float: right; 
} 

nav ul { 
    margin: 0; 
    padding: 2.8em 2em; 
} 

nav ul li { 
    display: inline; 
    padding: 0 .4em; 
} 

nav ul li a { 
    color: #222222; 
    text-decoration: none; 
    font-size: 20px; 
    padding-bottom: .5em; 
    transition: .5s color; 
} 

nav ul li a:hover { 
    border-bottom: 3px solid #222222; 
} 

Vous pouvez voir la question à frankkreutzer.com

Answer 1

Retirez le trop-plein-x 'corps': caché

body { 
    overflow-x: hidden; 
} 

Answer 2

Il est parce que vous avez un overflow-x: hidden; sur le html et body. Placez un overflow-x: visible; sur le body.

body { 
    overflow-x: visible; 
} 

Answer 3

ok. donc j'ai vérifié votre site Web (ne pas relier à des sites externes, mais faites plutôt un extrait fonctionnel ici)

le problème est que vous avez body,html { overflow-x:hidden } c'est pourquoi la barre de défilement n'est pas visible sous votre en-tête.

retirer cela et cela fonctionnera très bien