嵌套导航栏未在主导航下对齐

如何解决嵌套导航栏未在主导航下对齐

您好，我正在尝试在主导航中添加嵌套导航。问题是嵌套导航在主导航下无法正确对齐。请看截图。嵌套的导航不在主导航下方对齐。嵌套导航向右移动约50％。我正在使用CSS Flexbox布置导航。

body {
  background-color: red; /* to see menu */
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 8rem;
  width: 100%;
  background-color: transparent;
  transition: height 0.5s;
}

.heading a:link,a:visited {
  font-family: 'Alata',sans-serif;
  font-size: 3rem;
  text-transform: capitalize;
  color: white;
  cursor: pointer;
  display: block;
  position: relative;
  transition: .3s ease;
}

.heading a:hover,a:active {
  transform: translate(.3rem,-.2rem);
  color: white;
}

.navbar {
  display: flex;
  width: 45%;
  justify-content: space-between;
  list-style-type: none;
  z-index: 1000;
  position: relative;
}

.navbar li {
  position: relative;
  flex: 1 1 auto;
}

.nested {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  position: absolute;
  width: 100%;
}

.nested li {
  width: 100%;
}

.navbar li a:link,a:visited {
  padding: 5px 0px;
  cursor: pointer;
  color: white;
  display: block;
  transition: .3s;
}

.navbar li a:hover,a:active {
  transform: scale(1.2);
  color: white;
  background: rgba(0,0.082);
}

.toggler {
  display: none;
}

<div class="nav-wrapper">
  <h1 class="heading"><a href="#">HeaderName</a></h1>
  <div class="toggler">
    <i class="fas fa-bars"></i>
  </div>
  <ul class="navbar">
    <li><a href="#"> Home</a>
      <ul class="nested">
        <li>
          <a href="#"> <i class="fas fa-user-alt"></i> About Us</a>
        </li>
        <li><a href="#"><i class="fas fa-concierge-bell"></i> Services</a></li>
      </ul>
    </li>
    <li>
      <a href="#"> <i class="fas fa-user-alt"></i> About Us</a>
    </li>
    <li><a href="#"><i class="fas fa-concierge-bell"></i> Services</a></li>
    <li><a href="#"><i class="fas fa-briefcase"></i> Portfolio</a></li>
    <li><a href="#"><i class="fa fa-share" aria-hidden="true"></i> Contact</a></li>
  </ul>
</div>

解决方法

最后解决了问题。嵌套的导航栏上有填充物。必须向CSS添加padding：0属性。我的建议是在ul，li属性上添加margin：0和padding：0。