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

Question

您好，我正在尝试在主导航中添加嵌套导航。问题是嵌套导航在主导航下没有正确对齐。请看截图。嵌套导航没有在主导航下方对齐。嵌套导航向右移动了大约 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, 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>

Answer 1

终于解决问题了。嵌套导航上有填充。必须将 padding:0 属性添加到 css。我的建议是将 margin:0 和 padding:0 添加到 ul, li ,a 属性.

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

nested navbar doesn't align under main nav

html

css

flexbox

responsive

nav