How do I align flexbox navigation bar to the right?

I just have a quick question as I've run into a problem I am unable to solve. I just need a logo to be on the left of the container and navigation links (top-bar) on the left. Where is the problem in my code?

HTML:

<header>
        <div class="container">

            <?php
            $custom_logo_id = get_theme_mod('custom_logo');
            $logo = wp_get_attachment_image_src($custom_logo_id, 'full');

            if (has_custom_logo()) {
                echo '<a href="http://website.test/" class="site-link pull-left"> <img class="site-logo" src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '"> </a>';
            } else {
                echo '<h1 class="site-logo">' . get_bloginfo('name') . '</h1>';
            }
            ?>

            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'top-menu',
                    'menu_class' => 'top-bar'
                )
            );
            ?>
        </div>

    </header>

CSS:

header .container {
    height: 20%;
    z-index: 99;
    display: flex;
    align-items: center;
}

header .container .site-logo {
    align-items: flex-start;
}

header .container .top-bar {
    list-style-type: none;
    display: flex;
    align-self: flex-end;
}

Solution

When there is a logo image, it is wrapped in an <a> tag. So the margin needs to be applied to the <a>. When there is no logo image, the margin should be applied to the <h1>.

Try:


.site-link, .site-logo {
  margin-right: auto;
}