Custom Header and Footer Rendering Under Sidebar

My organization requires a custom header and footer for all of our branding. I quite like the Hugo learn theme, so I am attempting to merge the two.

In the screen shot above, you can see the header is rendering under the sidebar. This is occurring when I place the required header material into the custom-header.html partial. The custom header, added just prior to the tag, is:

<!-- BEGIN USGS Applications Header Template -->
<header id="navbar" class="header-nav"  role="banner">
<div class="tmp-container">
    <!-- primary navigation bar -->
        <!-- search bar-->
    <div class="header-search">
        <a class="logo-header" href="https://www.usgs.gov/" title="Home">
        <img class="img"  src={{"images/logo.png" | relURL}}  alt="Home" />
        </a>
        <form action="https://www.usgs.gov/science-explorer-results" method="GET" id="search-box">
        <div class="fa-wrapper"><label for="se_search" class="only">Search</label>
        <input id="se_search" type="search" name="es" placeholder="Search">
        <button class="fa fa-search" type="submit">
            <span class="only">Search</span>
            </button></div>
        </form>
    </div>
    <!-- end search bar-->
    </div> 
    <!-- end header-container-->

I suspect that this has to do with the position properties on the sidebar and possible how they are interacting with the CSS required by the header. Those css files are loading properly from common.css and custom.css that I have added into the /static directory.

Am I improperly making use of the custom-header.html partial or is this an issue where the CSS required by the header is conflicting with the CSS defined by the project?

matcornic / hugo-theme-learn

Custom Header and Footer Rendering Under Sidebar #541