How do I align elements of my navbar to the right

Question

I'm designing a navigation bar with four elements: the header logo aligned to the left, and the 'header-link' elements aligned to the right. Currently, the header-link elements are situated right next to the header logo. How can I make it so that the header-links are placed on the right side?

.flex-container {
    display: flex;
    width: 100%;
}

.dark-back {
    background-color: #1f2937;
}

.top {
    display: flex;
    width: 100%;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-link {
    display: flex;
    margin-left: auto;
    font-size: 18px;
    color: #e5e7eb;
    margin: 5px;
    border-right: 1px solid #1f2937;
    
}

.top-right {
    display: flex;
    justify-content: space-between;
}

<div class="flex-container">
    <div class="top dark-back">
        <ul>
            <div class="top-right">
                <li class="logo" style="font-size: 24px; color: #f9faf8; display: flex;">Header Logo</li>
                <li class="header-link">header link one</li>
                <li class="header-link">header link two</li>
                <li class="header-link">header link three</li>
            </div>             
        </ul>
    </div>
</div>