动态更改菜单项之间的边距

Question

我的页面顶部有一个'ul'列表，用于导航栏：

Minor Fragments

目前使用固定宽度div和每个项目周围的固定边距进行设置。我怎么能在“菜单项”之间留出空间，以便页面宽度的变化会增加/减少它们之间的边距？

例如，当窗口非常宽时：

当窗口缩小时：

到目前为止，我一直在使用@media CSS查询，但它非常混乱而且不流畅/动态。我将粘贴我目前得到的CSS：

ul.header_items {
    list-style:none;
    position:relative;
    width: 1250px;
    line-height:50px;
    margin-left: auto;
    margin-right: auto;
}

.header_items li{
    display: inline;
    list-style-type: none;
    font-family: 'cabinbold', sans-serif;
    color: #ffffff;
    padding: 5px 2px 5px 2px;
    background-color: #7E489C;
    font-size: 14pt;
    text-align:center;
    text-transform: uppercase;
    height: 31px;
    box-shadow: 0px 0px 18px 1px rgba(0,0,0,0.2);
    transition: 0.4s;
}

<header id="static_nav">
    <ul class="header_items" style="padding-left:0px;">
        <li class="<?php echo $active_page_home ?>" id="header_item_first"><a href="home" id="index_button">Home</a></li>
        <li class="<?php echo $active_page_dance ?>"><a href="dance-performance" id="dance_button">Dance &amp; Performance</a></li>
        <li class="<?php echo $active_page_adult ?>"><a href="adult-fitness.php">Adult &amp; Fitness</a></li>
        <a href="https://www.millyacademy.com/workshops.php"><li class="<?php echo $active_page_workshop ?>">Workshops</li></a>
        <a href="https://www.millyacademy.com/corporate-celebrations.php"><li class="<?php echo $active_page_corp ?>">Corporate &amp; Celebrations</li></a>
        <a href="https://www.millyacademy.com/showcase.php"><li class="<?php echo $active_page_gallery ?>">Gallery</li></a>
        <a href="https://www.millyacademy.com/shop.php"><li class="<?php echo $active_page_shop ?>">Shop</li></a>
        <a href="https://www.millyacademy.com/contact.php"><li class="<?php echo $active_page_contact ?>">Contact Us</li></a>
        <li id="button_student_login"><a href="student-login" id="login_button">Student Login</a></li>
    </ul>
</header>

提前感谢您的帮助！如果您想要查看导航栏的操作，则网址为