html - 为什么我的链接不居中？ (在菜单栏中)

Question

当我单击菜单栏时.links未正确居中。我不知道为什么会发生以及在哪里发生。我什至检查了代码但不明白。请解释我的代码有什么问题。我很困惑，所以我决定不再尝试。

* {
    padding: 0;
    margin: 0;
}
.nav_bar {
    background: gray;
    display: flex;
}
.links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 5%;
}

li {
    list-style: none;
    padding: 0 5% 0 5%;
    margin-right: 5%;
}
.txt {
    margin-right: auto;
    font-size: calc(2vw + 1.6rem);
    padding: 0 5% 0 5%;
}
a {
    text-decoration: none;
    color: black;
}

/* hamburger */

#toggle {
    display: none;
  }

  label {
    font-size: 32px;
    display: none;
    position: absolute;
    right: 5%;
  }

@media (max-width: 1000px)
{
    li {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    label {
        display: block;
        cursor: pointer;
      }
    .links {
        display: none;
        margin-top: 7vh;
        width: 100%;
        text-align: center;
    }
    .links a {
        font-size: 23px;
        text-decoration: none;
        color: rgb(102, 123, 145);
        line-height: 50px;
        font-weight: 500;
        color: white;
    }
    #toggle:checked + .links {
        display: block;
        animation: links 1s forwards;
    }
    @keyframes links {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0);
        }
    }
}

<nav class="nav_bar">
        <div class="txt">LOGO</div>
      <label for="toggle">&#9776;</label>
      <input type="checkbox" class="toggle" id="toggle" />
      <!-- <div class="txt">LOGO</div> -->
      <div class="links">
        <!-- <div class="txt">LOGO</div> -->
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </div>
    </nav>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic odit libero aut blanditiis at iste nihil nesciunt cupiditate enim. Accusamus, facere enim alias libero necessitatibus magni? Delectus nostrum ullam vero ratione quasi quae a aspernatur! Fugiat voluptatum, quis adipisci laboriosam temporibus tempore animi nobis omnis porro ducimus maxime officia sed ipsum sit perspiciatis reiciendis, ad, natus vel repudiandae? Praesentium ut doloremque inventore quo necessitatibus labore dicta magni at rem doloribus possimus aspernatur alias corporis voluptates cumque dolorum, nesciunt delectus magnam blanditiis sed exercitationem cum. Maiores velit quos magni veritatis exercitationem nesciunt repellat libero voluptates dicta eum eius tempora, unde 

Answer 1

txt div 占用了左侧空间。您可以在 .nav_bar 上添加 flex-wrap:wrap，这将获得 Logo 和图标下方的链接。