Nav still ending up in .site-branding

Hi I’m having a problem with some WordPress theme development. I’m working with Underscores to make my own theme, and I’ve integrated Foundation 5. My vision is to have an off-canvas site menu that comes down from the top. Logically, I want to move the nav above the header and site description, instead of the default of it being below, so I’m editing header.php. Here’s the code I have for the header:

<header id="masthead" class="site-header" role="banner">
    <nav id="site-navigation" class="main-navigation" role="navigation">
	<button class="menu-toggle" aria-controls="primary-menu" aria-
	expanded="false"><?php esc_html_e( 'Primary Menu', 'ibeyi' ); ?>
	</button>
	<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id'
	=> 'primary-menu' ) ); ?>
    </nav><!-- #site-navigation -->

    <div class="site-branding">
	<?php if ( is_front_page() && is_home() ) : ?>
	    <h1 class="site-title"><a href="<?php echo esc_url( home_url(
	    '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></h1>
	<?php else : ?>
	    <p class="site-title"><a href="<?php echo esc_url( home_url( '/'
	    ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></p>
	<?php endif; ?>
	    <p class="site-description"><?php bloginfo( 'description' ); ?>
	    </p>
    </div><!-- .site-branding -->
</header><!-- #masthead -->

Yet for some reason when I apply this styling

.site-branding{
    background-color: grey;
}

It effects nav as well! For whatever reason, nav is still acting as though it is in .site-branding. Does anyone know why this is happening?