back + CSSinfosJS + liveJS + columns

public/style.css

@@ -4,21 +4,70 @@ body {
   max-width: 1280px;
 }
 
+h1 {
+  text-align: center;
+}
+
 .navbar {
-  background-color: #FFF;
+  background-color: #FFF !important;
   border-radius: 2px;
-  max-width: 800px;
+  /* max-width: 800px; */
+  position: sticky;
+  top: 0px;
+  width: 100%;
+  display: block;
+  max-width: none;
+  text-align: center;
+  a {
+    /* color: #000; */
+    color: blue; 
+    display: inline-block;
+    font-size: 15px;
+    padding: 10px 10px 10px 0;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: red;
+  }
 }
 
-.navbar a {
-  color: #000;
-  display: inline-block;
-  font-size: 15px;
-  padding: 10px 10px 10px 0;
-  text-decoration: none;
+
+#contenant {
+  background-color: red;
+  /* height: 2000px; */
+
+  /* https://www.w3schools.com/howto/howto_css_two_columns.asp */
+  .left, .right {
+    float:left;
+    width: 50%;
+    box-sizing: border-box;
+  }
+  .left {
+    width: calc(50% - 30px);
+    padding-left: 10px;
+  }
+  .right {
+    border-left: 1px solid #000;
+    padding-left: 30px;
+  }
+  p:first-child {
+    margin-top: 0;
+  }
+  p:last-child {
+    margin-bottom: 0;
+  }
+  display: none;
 }
 
-.navbar a:hover {
-  color: #ffffff;
-}
 
+#contenant_cols {
+  column-count: 3;
+  float: left;
+  
+  .text {
+    text-align: justify;
+    hyphens: auto;
+    display: block;
+  }
+}