html - 悬停时导航列表项占用过多空间

Question

当我悬停在“Newsletter”上时它占用了很大的空间，我尝试调整边距但没有任何反应，我也尝试了 margin-left 和 margin-right 但问题是一样的。下面是代码:

hr {
  margin: 0px;
}
body {
  background: url(../images/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  word-wrap: break-word;
}
h1 {
  font-family: "Sacramento";
  color: #F0FFF0;
}
.title >h1 {
  color: #222;
  transition: color 2s;
}
.title:hover >h1 {
  color: #6565f0;
}
.title {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: -22px;
  font-size: 19px;
  transition: font-size 0.4s;
}
.title:hover {
  font-size: 22px;
}
.nav ul {
  background-color: transperent;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  margin-top: 10px;
  height: 40px;
  border-bottom: 1px solid #888;
  transition: font-size 0.4s;
}
.nav li:hover {
  font-size: 1.6em;
}
.nav a {
  text-decoration: none;
  color: #222;
  display: block;
  transition: .3s background-color;
}
.nav a:hover {
  background-color: #005f5f;
}
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
  /* Option 1 - Display Inline*/
  .nav li {
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
  }
}

<font align=center>
  <div class="title">
    <h1>Welcome</h1>
  </div>
</font>
<hr />
<div class="nav">
  <ul>
    <li class="home"><a href="#">Home</a>
    </li>
    <li class="tutorials"><a href="#">Tutorials</a>
    </li>
    <li class="about"><a href="#">About</a>
    </li>
    <li class="news"><a href="fb.com" target=_blank>Newsletter</a>
    </li>
    <li class="contact"><a href="#">Contact</a>
    </li>
  </ul>
</div>
<hr style="margin-top:5px;" />

Answer 1

更新li的宽度为width:130px;

.nav li {
   width:130px;
}