多くのテキストで固定の右ナビゲーションバーが移動する

Question

プレーンでシンプルなHTMLといくつかのCSSでナビゲーションリストを作成しました。それはページの右側にあるべきで、ページに多くのコンテンツがある場合でも、ユーザーがスクロールしても移動しないようにしてください。

ウェブサイトにサンプルテキストを追加した後、ナビゲーション要素が左側に多くあることがわかりました。なぜこれが起こっているのですか？これをどのように修正できますか？

これは単にいくつかのテキストの最初の最小限の例です。

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

とナビゲーションリストは、最初の例よりも左側にもっとあるいくつかのより多くのテキストをスニペット：

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

注：どちらも同じCSSスタイルが定義されている：

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; 
} 

編集：@Autista_zが述べたように

スクロールバーがある場合には、ナビゲーションバーが移動しますが、私は常にスクロールバーを表示したくありません。これを改善する良い方法はありませんか？

Answer 1

@Autista_zによると、それはスクロールバーのためです。

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

これを確認すると、フィドルが更新されます。

これは修正されていませんが、どのように問題ではないかをお見せしたいと思います。

は私がやったすべてが

body { 
    overflow: scroll; 
}