调整浏览器大小时导航系统有点奇怪

Question

当我调整浏览器大小时，导航列表项目稍微低于顶栏时出现问题。当我删除图像时，它似乎在所有屏幕分辨率上都能正常工作，但插入徽标会对此产生影响。有什么办法可以解决这个问题。似乎无法找出问题所在。

HTML：

<!-- HEADER START -->
 <div id="header">
 <nav class="top-bar" data-topbar>
  <ul class="title-area">

  <li class="name">
    <h1>
  <a href="index.html"><img src="img/flogo.svg" class="logo" alt="Logo">  
    Sharp <span>Media  </span>          
      </a>
    </h1>
   </li>
  </li>
  <li class="toggle-topbar menu-icon"><a href="index.html"><span>menu</span></a></li>
</ul>

<section class="top-bar-section">

  <ul class="right">
    <li class="divider"></li>
    <li class="has-dropdown">
      <li><a href="index.html">Home</a></li>
      <ul class="dropdown">

          </ul>
        </li>

    <li class="divider"></li>
    <li><a href="faq.html">FAQs</a></li>
    <li class="divider"></li>
    <li class="has-dropdown">
      <li><a href="contact.php">Contact Us</a></li>
      <ul class="dropdown">

        <li class="divider"></li>

      </ul>
    </li>
     </ul>
   </section>
   </nav>