fix: css centering issues in /ranking

ranking/styles.css

@@ -28,6 +28,10 @@ body {
     background-attachment: fixed;
 }
 
+:root {
+    --sidebar-width: 330px;
+}
+
 .menu-item .hover-state {
     display: none;
 }
@@ -111,7 +115,7 @@ body {
 }
 
 .logo-left-align {
-    display: flex;
+    display: flex-start;
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
@@ -173,7 +177,6 @@ body {
     justify-content: center;
     gap: 15px;
     margin: 30px 0;
-    transform: translateX(50px);
 }
 
 .mode-button { width: 280px; transition: transform 0.1s ease; }
@@ -188,7 +191,6 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    transform: translateX(50px);
 }
 
 .rank-header-area {
@@ -326,3 +328,9 @@ body {
     transform: scale(2.0);
     transform-origin: center;
 }
+
+.main-wrapper {
+    width: calc(100% - var(--sidebar-width));
+    display: flex;
+    flex-direction: column;
+}