Как создать равномерный интервал в Navbar

Question

Мне было интересно, как я могу создать равномерный интервал в моей навигационной панели.Я хочу иметь даже интервал между «Историей, этимологией и О».Я также хочу, чтобы эта часть оставалась справа, а Шиба Ину - слева.Я приложил изображение того, что у меня есть в настоящее время, а также изображение того, что я хотел бы.

Спасибо!

Что я хочу

Что у меня есть

.navbar{
    font-size: 13pt;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    height: 70px;
    align-items: center;
    position: fixed;
}

.main-nav{
    list-style-type: none;
    display: flex;
    margin-right: 30px;
    flex-direction: row;
    justify-content: flex-end;
}

.home, 
.nav-links{
    text-decoration: none;
    color:#212020;
}

.main-nav li{
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    justify-content: space-between;
    font-size: 13pt;
}

.home{
    display: inline-block;
    font-size: 22px;
    margin-left: 10px;
}

        <nav class="navbar">
            <a href="index.html" class="home">SHIBA INU</a>
            <ul class="main-nav">
                <li>
                    <a href="index.html" class="nav-links" >ABOUT</a>
                </li>
                <li>
                    <a href="#" class="nav-links" >ETYMOLOGY</a>
                </li>
                <li>
                    <a href="#" class="nav-links" >HISTORY</a>
                </li>
            </ul>
        </nav>

Answer 1

В итоге:

• Убедитесь, что ваш flex-родитель или flex-контейнер имеют ширину, определенную для родителя, в этом случае 100% означает полное окно, поскольку здесь нет другого родителя.

• С другой стороны, пробел между элементами списка может быть сделан с несколькими подходами, но я думаю, что запас, который исключает последний, должен работать для вашего варианта использования.

.navbar{
    font-size: 13pt;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    height: 70px;
    align-items: center;
    position: fixed;
    width: 100%;
}

.main-nav{
    list-style-type: none;
    display: flex;
    margin-right: 30px;
    flex-direction: row;
    justify-content: flex-end;
    flex-grow: 1;
    align-items: justify-content;
}

.home, 
.nav-links{
    text-decoration: none;
    color:#212020;
}

.main-nav li{
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    justify-content: space-between;
    font-size: 13pt;
}

   .main-nav li:not(:last-child) {
   margin-right: 10px;
   }

.home{
    display: inline-block;
    font-size: 22px;
    margin-left: 10px;
}

        <nav class="navbar">
            <a href="index.html" class="home">SHIBA INU</a>
            <ul class="main-nav">
                <li>
                    <a href="index.html" class="nav-links" >ABOUT</a>
                </li>
                <li>
                    <a href="#" class="nav-links" >ETYMOLOGY</a>
                </li>
                <li>
                    <a href="#" class="nav-links" >HISTORY</a>
                </li>
            </ul>
        </nav>