Wordpress / Underscores中的并排DIV

Question

我正在使用Wordpress启动程序，underscores来启动主题。我已经使用CSS尝试并排放置2个DIV而没有运气。我已经完成了我在这种情况下通常做的事情，但它没有奏效。也没有我在SO上找到的任何其他解决方案。

总体目标是标题为屏幕宽度的90％（居中），网站标题和主要导航占据该空间的50％。有什么想法吗？

HTML（减少PHP以避免事情变得复杂）：

<header id="masthead" class="site-header" role="banner">
    <div class="site-branding">
        <h1><a href="#">Test Site</a></h1>
    </div>

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <p> menu items </p>
    </nav>
</header>

我尝试过的最基本的CSS解决方案：

#masthead {
    width: 90%;
    margin: 5px auto;
}

.site-branding {
    width: 50%;
    float: left;
}

.main-navigation {
    width: 50%;
    float: left;
}