mettre les défilantes colonnes adjecentes au principal div

layouts/home.html

@@ -19,34 +19,35 @@
     <link rel="stylesheet" href="{{ $core.RelPermalink }}">
     
     <style>
+      body {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: center; /* Center the main-screen horizontally */
+        align-items: stretch; /* Ensure full height */
+        min-height: 100vh; /* Ensure the body takes up the full viewport height */
+      }
+
       .main-screen {
-        box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        width: 100%;
-        max-width: 100%;
-        padding: 0px 10px;
-        gap: 2rem;
+        justify-content: space-between; /* Ensure side-screens are adjacent to main-content */
+        width: auto; /* Allow the width to adjust based on content */
+        max-width: 100%; /* Prevent overflow */
+        gap: 0;
+        text-align: justify;
       }
 
       .side-screen {
         height: 100vh;
-        overflow-y: hidden;
-        width: 400px;
-        min-width: 400px;
+        overflow-y: auto; /* Allow scrolling if content overflows */
+        flex: 0 0 400px; /* Fixed width of 400px */
       }
 
       .main-content {
-        position: relative;
-        flex-grow: 2;
-        width: 100%;
-        max-width: 750px;
+        flex-grow: 1; /* Take up the remaining space between side-screens */
+        max-width: 750px; /* Optional: Limit max width */
+        margin: 0 25px;
       }
 
       .site-title {
@@ -71,11 +72,11 @@
 
       @media (max-width: 1380px) {
         .side-screen {
-          display: none;
+          display: none; /* Hide side-screens on smaller screens */
         }
 
         .main-screen {
-          justify-content: center;
+          justify-content: center; /* Center main-content when side-screens are hidden */
         }
       }
     </style>