2つのリンクを右に揃えると、水平スクロールバーが表示されます。

Question

下の図に示すように、右に2つのリンクが表示されました。

これを実行すると、水平スクロールバーが画面に表示されました。

どうすれば画面に合わせることができますか？ここで

私のコードです：

body { 
 
    background-color: green; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
/*Navigation bar*/ 
 

 
nav { 
 
    background-color: #47476b; 
 
    overflow: auto; 
 
} 
 
nav a { 
 
    color: white; 
 
    font-size: 1.2em; 
 
    text-decoration: none; 
 
    padding: .5em; 
 
    background-color: #47476b; 
 
    margin-right: -0.3em; 
 
    float: left; 
 
    display: inline-block; 
 
} 
 
.right { 
 
    float: right; 
 
}

<nav> 
 
    <a class="active" href="#">Home</a> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 4</a> 
 
    <a href="#">Link 5</a> 
 
    <a href="#">Link 6</a> 
 
    <div class="right"> 
 
    <a href="#">Link 7</a> 
 
    <a href="#">Link 8</a> 
 
    </div> 
 
</nav>

Answer 1

はこのCSSを含める：

nav { 
 
    width: 100%; 
 
    overflow-x: hidden; 
 
} 
 
nav a { 
 
    margin-right: 0px; 
 
}

このwidth: 100%;は、画面の全幅を占めるnavbarの幅をパーセンテージで表します。そしてoverflow-x: hidden;は、x軸の余分なスペース/オーバーフローを表示しないようにし、スクロールバーを描画しません。