fix navigation

Author: fraolBatole

_includes/header.html

@@ -9,7 +9,7 @@
                    style="height: 60px; margin: 10px 0; background-color: white; padding: 5px; border-radius: 4px;"/>
             </a>
             <!-- Move the navigation links here -->
-            <div class="navbar-nav d-none d-sm-flex nav-horizontal">
+            <div class="navbar-nav nav-horizontal">
               <a class="nav-item nav-link" href="/projects.html">Projects</a>
               <a class="nav-item nav-link" href="/papers/">Papers</a>
               <a class="nav-item nav-link" href="/grants/">Grants</a>

css/design.scss

@@ -40,13 +40,29 @@ body {
 .nav-horizontal {
   display: flex;
   justify-content: flex-end;
-  width: 100%;
+  width: auto;  /* Changed from 100% to auto */
+  align-items: center;
 }
 
 .nav-horizontal .nav-item {
   margin-left: 15px;
+  width: auto !important;  /* Override any width settings */
 } 
 
+/* Override any conflicting styles */
+.navbar-nav.nav-horizontal .nav-link {
+  width: auto !important;
+  text-align: center;
+  white-space: nowrap;
+}
+
+/* Ensure flex-separate works correctly */
+.flex-separate {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .brand-navbar {
 //   border-bottom: 6px solid #DFBD00;
   padding-top: 0.5rem;