MyBB Community Forums

I'm trying to add my site header above the forum menu header, but the header overlaps the forum header. It seems like this could easily be fixed, but I'm not great at html and I'm not sure what is going wrong.
I'm using the Flatty theme.
https://imgur.com/a/u4k3z52
Here is the default header template:

<div id="container">
	<a name="top" id="top"></a>
	<div id="logo">
		<div class="wrapper">
			<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" title="{$mybb->settings['bbname']}" /></a>
		</div>
	</div>
	<div id="header">
		<div id="panel">
			<div class="upper">
				<div class="wrapper">
					{$welcomeblock}
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
				</div>
		</div>
	<div id="content">
		<div class="wrapper">
			{$bbclosedwarning}
			{$modnotice}
			{$pm_notice}
			{$remote_avatar_notice}
			{$bannedwarning}
			{$pending_joinrequests}
			{$awaitingusers}
			<navigation>
			<br />

And here is the header template with the site header added:

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="generator" content="Mobirise v4.12.4, mobirise.com">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="shortcut icon" href="https://www.travellands.net/assets/images/tl.webp" type="image/x-icon">
    <meta name="description" content="">
    <title>Home</title>
    <link rel="stylesheet" href="https://www.travellands.net/assets/web/assets/mobirise-icons/mobirise-icons.css">
    <link rel="stylesheet" href="https://www.travellands.net/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://www.travellands.net/assets/bootstrap/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="https://www.travellands.net/assets/bootstrap/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="https://www.travellands.net/assets/tether/tether.min.css">
    <link rel="stylesheet" href="https://www.travellands.net/assets/socicon/css/styles.css">
    <link rel="stylesheet" href="https://www.travellands.net/assets/web/assets/gdpr-plugin/gdpr-styles.css">
    <link rel="stylesheet" href="https://www.travellands.net/assets/dropdown/css/style.css">
    <link rel="stylesheet" href="https://www.travellands.net/assets/theme/css/style.css">
    <link rel="preload" as="style" href="https://www.travellands.net/assets/mobirise/css/mbr-additional.css">
    <link rel="stylesheet" href="https://www.travellands.net/assets/mobirise/css/mbr-additional.css" type="text/css">
  </head>

<div id="container">
  <a name="top" id="top"></a>
  <div>
		<section class="menu cid-qTkzRZLJNu" once="menu" id="menu1-0">
      	<nav class="navbar navbar-expand beta-menu navbar-dropdown align-items-center navbar-fixed-top navbar-toggleable-sm">
        	<!--<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"

          	data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"

          	aria-expanded="false" aria-label="Toggle navigation">
         	 <div class="hamburger"> <span></span> <span></span> <span></span> <span></span>
         	 </div>
        	</button>-->
        <div class="menu-logo">
          <div class="navbar-brand"> <span class="navbar-logo"> <a href=" https://www.travellands.net/index.html">
                <img src=" https://www.travellands.net/assets/images/travellands.png" alt="TravelLands" style="height: 4.1rem;">
              </a> </span> </div>
        </div>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav nav-dropdown nav-right" data-app-modern-menu="true">
            <li class="nav-item"> <a class="nav-link link text-white display-4"

                href=" https://www.travellands.net/index"> <span class="mbri-home mbr-iconfont mbr-iconfont-btn"></span>Home</a>
            </li>
            <li class="nav-item"> <a class="nav-link link text-white display-4"

                href="index.php"><span class="mbri-help mbr-iconfont mbr-iconfont-btn"></span>
                Forums</a> </li>
            <li class="nav-item"><a class="nav-link link text-white display-4" href="https://store.travellands.net"><span

                  class="mbri-shopping-basket mbr-iconfont mbr-iconfont-btn"></span>
                Shop</a></li>
            <li class="nav-item"><a class="nav-link link text-white display-4" href=" http://www.travellands.net/staff"

                aria-expanded="false"><span class="mbri-contact-form mbr-iconfont mbr-iconfont-btn"></span>
                Staff</a></li>
          </ul>
        </div>
      </nav>
    </section>
  </div>
</div>
	<div id="header">
		<div id="panel">
			<div class="upper">
				<div class="wrapper">
					{$welcomeblock}
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
				</div>
		</div>
		</div>
</div>
	<div id="content">
		<div class="wrapper">
			{$bbclosedwarning}
			{$modnotice}
			{$pm_notice}
			{$remote_avatar_notice}
			{$bannedwarning}
			{$pending_joinrequests}
			{$awaitingusers}
			<navigation>
			<br />

having same issue. Can some please help.

JJosh

emilymoore