Div накладывает элемент родного брата и имеет дополнительную высоту без видимой причины

Привет у меня возникла проблема с разработкой темы WordPress. Я работаю с Underscores, чтобы создать свою собственную тему, и я интегрировал Foundation 5. Моё видение — создать меню сайта вне холста, которое идет сверху вниз. Логично, что я хочу переместить навигацию над заголовком и описанием сайта, а не по умолчанию, как показано ниже, поэтому я редактирую header.php. Вот код, который находится между тегами заголовка:

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

Вот HTML-код, который он выплевывает (из инструментов Chrome dev):

<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">Primary Menu</button>
<div class="menu"><!--menu truncated for sake of brevity; your regular ul, li scene--></div>
</nav><!-- #site-navigation -->

<div class="site-branding">
<h1 class="site-title"><a href="http://localhost/ibeyi_theme/" rel="home">Ibeyi Theme</a></h1>
<p class="site-description">Just another WordPress site</p>
</div><!-- .site-branding -->
</header>

Вы можете видеть, что я переехал из своего прежнего местоположения, которое было внутри div.site-брендинга. Тем не менее, по какой-то причине, когда я применяю этот стиль

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

Эффект дает навигацию на сером фоне! По какой-то причине nav все еще действует так, как если бы он был под брендом .site! Технически я могу обойти это, разработав несколько исключений для nav, но, похоже, было бы легче попытаться выяснить, почему это происходит. Я не совсем понимаю, что WP PHP постоянно выплевывает, так что, возможно, это как-то связано с этим. Кто-нибудь знает, почему это происходит?

Скриншот

ОБНОВЛЕНИЕ: Из комментариев мы пришли к выводу, что сам элемент nav не имеет светло-серый цвет, определенный как его цвет фона. Вместо этого, по какой-то причине, div с фирменным наименованием сайта постоянно расширяется. .site-branding поднимает больше высоты, чем нужно, хотя у него нет полей или отступов, и он не наследует свою высоту от родительского элемента, так как они имеют немного различную высоту. Чтобы проиллюстрировать, как div достигнет вершины, не смотря ни на что, вот скриншот моей ситуации с уменьшением высоты .site-branding:

Снимок экрана — уменьшенная высота

И nav, и .site-брендинг являются position: static и выходят из верхней части страницы при прокрутке вниз, как они и должны. По какой-то причине он застрял наверху, хотя при прокрутке действует так же, как статический элемент. Он даже заходит так далеко, что позволяет его содержимому выплескиваться снизу, чтобы он мог доходить до самого верха. Последнее интересное замечание: если я поставлю верхнюю границу, она выйдет из верха, но это единственный способ, которым я смог сделать это до сих пор, и кажется, что это исправление, которое просто избегает проблемы. Я хочу выяснить, почему он делает то, что делает.

Все еще загадка. Оказывается, я даже не собираюсь использовать эту навигационную схему, но мне действительно любопытно, почему это происходит, и я хотел бы знать, на случай, если я столкнусь с подобной проблемой в будущем.