Side by Side DIVs in WordPress/Underscores

I’m currently playing around with the WordPress starter them, underscores to start theming. I’ve used CSS to try and place 2 DIVs side by side with no luck. I’ve done what I usually do in this scenario but it hasn’t worked. Nor has any other solution that I’ve found on SO.

The overall goal is for the header to be 90% of the screen width (centered) with the site-header and main-navigation to take up 50% of that space. Any ideas?

The HTML (less the php to avoid things being over complicated):

<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>

The most basic CSS solution that I’ve tried:

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

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

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