header content alignment issue

apps/block_scout_web/assets/css/components/_navbar.scss

@@ -22,7 +22,7 @@ $navbar-logo-width: auto !default;
     font-size: 14px;
   }
   .navbar-nav {
-    flex-grow: 1;
+    // flex-grow: 1;
 
     .nav-link {
       align-items: center;
@@ -153,6 +153,18 @@ $navbar-logo-width: auto !default;
     @include media-breakpoint-up(xl) {
       width: 280px;
     }
+    @media (min-width: 1366px) {
+      width: 330px;
+    }
+    @media (min-width: 1440px) {
+      width: 380px;
+    }
+    @media (min-width: 1580px) {
+      width: 430px;
+    }
+    @media (min-width: 1800px) {
+      width: 520px;
+    }
   }
   .input-group-append {
     height: 38px;
@@ -198,7 +210,7 @@ $navbar-logo-width: auto !default;
     width: 100%;
 
     .awesomplete {
-      @include media-breakpoint-down(sm) {
+      @include media-breakpoint-down(lg) {
         width: 100%;
       }
     }
@@ -210,6 +222,10 @@ $navbar-logo-width: auto !default;
 
 .navbar-brand {
   margin-left: 0;
+  flex-shrink: 1;
+  .navbar-logo {
+    max-width: 100%;
+  }
 }
 
 .navbar-logo {
@@ -227,3 +243,18 @@ $navbar-logo-width: auto !default;
 .add-border {
   border: 1px solid transparentize($white, 0.30);
 }
+
+.navbar-collapse {
+  justify-content: flex-end;
+  align-items: flex-start;
+  flex-shrink: 0;
+  @media (min-width: 992px) {
+    align-items: center;
+  }
+}
+
+.navbar-container, .navbar-primary {
+  @include media-breakpoint-up(xl) {
+    padding-right: 0;
+  }
+}

apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-dark navbar-expand-lg navbar-primary" data-selector="navbar">
-  <div class="container">
+  <div class="container-fluid navbar-container">
     <%= link to: chain_path(@conn, :show), class: "navbar-brand", "data-test": "header_logo" do %>
       <img class="navbar-logo" src="<%= logo() %>" alt="<%= subnetwork_title() %>" />
     <% end %>
@@ -7,7 +7,7 @@
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav">
         <li class="nav-item dropdown">
           <a class="nav-link topnav-nav-link dropdown-toggle" href="#" id="navbarBlocksDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <span class="nav-link-icon">