当我将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%;使导航栏的宽度以百分比形式占据屏幕的整个宽度。并且overflow-x: hidden;使得x轴上的所有额外空间/溢出都不可见，因此它不会呈现滚动条。