feat: Center Navbar and Section Elements for Better UI Alignment #25

Signed-off-by: IamLRBA <jerrylarubafestus@gmail.com>

Author: IamLRBA

public/styles/common.css

@@ -25,12 +25,12 @@ body {
 
 .nav-content {
     max-width: 1200px;
-    margin: 0;
+    margin: 0 auto;
     display: flex;
-    justify-content: flex-start;
+    justify-content: center;
     align-items: center;
     gap: 2rem;
-    padding-left: 2rem;
+    padding: 0 2rem;
 }
 
 .nav-logo {
@@ -101,7 +101,7 @@ body {
 @media (max-width: 768px) {
     .nav-content {
         flex-direction: column;
-        align-items: flex-start;
+        align-items: center;
         padding: 0.5rem;
     }
 
@@ -119,7 +119,7 @@ body {
         display: none;
         width: 100%;
         flex-direction: column;
-        align-items: flex-start;
+        align-items: center;
         padding: 1rem 0;
         gap: 1rem;
     }
@@ -130,20 +130,27 @@ body {
 
     .dropdown {
         width: 100%;
+        text-align: center;
     }
 
     .dropdown-content {
         display: none;
         position: static;
         transform: none;
         width: calc(100% - 2rem);
-        margin: 0.5rem 0 0.5rem 2rem;
+        margin: 0.5rem auto;
         background: rgba(0, 0, 0, 0.4);
+        text-align: center;
     }
 
     .nav-item {
         width: 100%;
         padding: 0.5rem 1rem;
+        text-align: center;
+    }
+
+    .dropdown-item {
+        text-align: center;
     }
 
     /* Remove hover behavior on mobile */

public/styles/index.css

@@ -220,7 +220,7 @@ p {
     backdrop-filter: blur(10px);
     max-width: 800px;
     margin: 0 auto;
-    text-align: left;
+    text-align: center;
 }
 
 .profile-image-link {
@@ -234,6 +234,7 @@ p {
 .profile-section-header {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding: 1.5rem;
+    text-align: center;
 }
 
 .profile-image-link:focus {
@@ -267,6 +268,11 @@ p {
     font-size: 1.3rem;
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: 1rem;
+    text-align: center;
+}
+
+.links-group h3 {
+    text-align: center;
 }
 
 .links-row {