Replace useless divs with flex layout in navbar

Notable changes proposed by @pslaughter

app/assets/stylesheets/framework/header.scss

@@ -565,15 +565,14 @@
 }
 
 .navbar-empty {
+  justify-content: center;
   height: $header-height;
   background: $white-light;
   border-bottom: 1px solid $white-normal;
 
-  .mx-auto {
   .tanuki-logo,
-    img {
-      height: 36px;
-    }
+  .brand-header-logo {
+    max-height: 100%;
   }
 }
 

app/helpers/appearances_helper.rb

@@ -28,7 +28,7 @@ module AppearancesHelper
 
   def brand_header_logo
     if current_appearance&.header_logo?
-      image_tag current_appearance.header_logo_path
+      image_tag current_appearance.header_logo_path, class: 'brand-header-logo'
     else
       render 'shared/logo.svg'
     end

app/views/layouts/header/_empty.html.haml

 %header.navbar.fixed-top.navbar-empty
-  .container
-    .mx-auto
   = brand_header_logo

changelogs/unreleased/fix_-56347.yml

+---
+title: Fix overlapping empty-header logo
+merge_request: 24868
+author: Jonas L.
+type: fixed