php - 无法对齐导航栏和 Logo

Question

我在为我正在构建的网站对齐导航栏和 Logo 时遇到问题。如果不涉及 WordPress，我可以做到这一点，但是我的 wordpress 主题生成了一堆我不确定如何使用的类。

这是我目前拥有的:

我想让 Logo 留在左侧，同时将菜单项移到 Logo 的右侧。我的网站是 invictus-together.com 如果您想查看该网站进行检查。我的 php/html 是:

<div id="page">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'invictus' ); ?></a>

    <header id="masthead" class="site-header">
            <a href="invictus-together.com"><img src="<?php echo get_template_directory_uri(); ?>/invictus-together-logo-white.png"/></a>
            <nav id="site-navigation" class="main-navigation">
                <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'invictus' ); ?></button>
                <?php
                wp_nav_menu( array(
                    'theme_location' => 'menu-1',
                    'menu_id'        => 'primary-menu',
                ) );
                ?>
            </nav><!-- #site-navigation -->

        <div class="login-section">
        </div>
    </header><!-- #masthead -->
</div>

此外，我当前的 CSS 是这样的:

.site-header {
    background-color: black;
    color: white;
    align-items:center;
}

#masthead {
    display: float-left;
}

.main-navigation {
    clear: none;
    float:left;
    padding-top: 36px;
}

.main-navigation a{
    color:white;
    margin:5px;
}

如果有人能帮助我，我将不胜感激。

Answer 1

#masthead {
显示:向左浮动；
}

这是无效的 CSS。

header a:first-child {
    float: left;
    width: 25%;
    display: block;
}

header a:first-child img {
    width: 100%;
    height: auto;
}

.main-navigation {
    clear: none;
    float:left;
    padding-top: 36px;
    width: 75%;
}