我尝试使用Flexbox使页眉具有响应性，但我希望添加自定义填充，同时仍保持响应性，即在较小的屏幕上填充应该变小等
下面是我的代码：我希望每个项目都有不同的左右填充，屏幕越小，填充应该越小，就像Flex的默认操作方式一样

<nav class="menu-bar">
    <a href="#" class="logo-header"><img src="" alt="logo" /></a>
      <a href="services.html" ; class="Nav-bar" id="Services">Services</a>
    <a href="#" ; class="Nav-bar" id="Tools">Tools & Resources</a>
    <a href="#" ; class="Nav-bar" id="About">About</a>
    <a href="#" class="Nav-bar" id="pop">Contact</a>
    <a href="index.html"; class="Nav-bar"><button onclick="window.location.href='index.html';" class="quote">Client Login</button></a>
  </nav>

.menu-bar {
    width: 100%;
    background: #161B21 0% 0% no-repeat padding-box;
    box-shadow: 0rem 1.125rem 0.813rem #00000029;
    opacity: 1;
    position: fixed;
    z-index: 10;
    
    display: -webkit-box;
  display: flex;
  justify-content: space-around;
  -webkit-box-align: center;
          align-items: center;
}

.Nav-bar {
    font: normal normal normal 1.625rem Poppins;
    padding-top: 86px;
    padding-bottom: 65px;
    letter-spacing: 0rem;
    color: #ABAAAA;
    opacity: 1;
    text-decoration: none;
}
.Nav-bar:nth-of-type(n+3) {
    -webkit-box-ordinal-group: 3;
                                    order: 2;
}

.Nav-bar:hover {
    color: #F4A950;
}
.logo-header {
    width: 382px;
height: 73px;
    -webkit-box-ordinal-group: 2;
          order: 1;
}