fix: Fixed-layout navigation aligns with the width of the main content.

Author: shuashuai

ui/src/components/Header/index.scss

@@ -30,6 +30,11 @@
     max-height: 2rem;
   }
 
+  .fixed-width {
+    padding-left: 28px;
+    padding-right: 36px;
+  }
+
   .create-icon {
     color: var(--bs-nav-link-color);
   }
@@ -120,6 +125,9 @@
 
 @media (max-width: 1199.9px) {
   #header {
+    .fixed-width {
+      padding-right: 48px;
+    }
     .nav-grow {
       flex-grow: 1 !important;
     }
@@ -134,8 +142,21 @@
   }
 }
 
+@media screen and (max-width: 991px) {
+  #header {
+    .fixed-width {
+      padding-left: 40px;
+      padding-right: 48px;
+    }
+  }
+}
+
 @media screen and (max-width: 767px) {
   #header {
+    .fixed-width {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
     .nav-text {
       flex: 1;
       white-space: nowrap;

ui/src/components/Header/index.tsx

@@ -115,8 +115,8 @@ const Header: FC = () => {
       id="header">
       <div
         className={classnames(
-          'w-100 d-flex align-items-center px-3',
-          layout === 'Fixed-width' ? 'container-xxl' : '',
+          'w-100 d-flex align-items-center',
+          layout === 'Fixed-width' ? 'container-xxl fixed-width' : 'px-3',
         )}>
         <Navbar.Toggle
           className="answer-navBar me-2"