Fixed rechten Navigationsleiste bewegt sich mit viel Text

Question

Ich habe eine Navigationsliste mit einfachen und einfachen HTML und einige CSS erstellt. Es sollte sich auf der rechten Seite der Seite befinden und sollte sich weder bewegen, wenn auf der Seite viel Inhalt vorhanden ist, noch wenn der Benutzer nach unten scrollt.

Nachdem ich einige Beispieltext zu meiner Website hinzugefügt habe, erkannte ich, dass das Navigationselement mehr auf der linken Seite ist. Warum passiert das und wie kann ich das beheben?

Dies ist das erste minimal Beispiel mit nur einem Text:

https://jsfiddle.net/sck6nL6w/2/

Und ein Ausschnitt mit etwas mehr Text, in dem die Navigationsliste mehr auf der linken Seite ist als im ersten Beispiel:

https://jsfiddle.net/7Lsew6gg/3/

Hinweis: Beide haben die gleichen CSS-Stile definiert:

ul { 
    list-style-type: none; 
    padding: 0; 
    width: 200px; 
    float: right; 
    margin: 0 5em 0 0; 
    right: 0%; 
    top: 5%; 
    position: fixed; 
} 

li a { 
    display: block; 
    padding: 8px 16px; 
    text-decoration: none; 
} 

.navigation div { 
    margin-left: 60px; 
} 

#content div { 
    width: 65% !important; 
} 

Edit:

Als @Autista_z die Navigationsleiste erwähnt bewegt wird, wenn es eine Scrollbar ist, aber ich will nicht immer eine Scrollbar zeigen. Gibt es keinen besseren Weg, das zu beheben?

Answer 1

wie von @Autista_z gesagt, es ist nur wegen der Bildlaufleiste.

`https://jsfiddle.net/sck6nL6w/4/' 

überprüfen Sie diese Updates Geige.

es ist nicht fix, aber ich möchte Ihnen zeigen, wie es überhaupt kein Problem ist.

alles, was ich tat, ist diese Codezeile hinzugefügt

body { 
    overflow: scroll; 
}