Update README.md

README.md

@@ -16,7 +16,7 @@
       min-height: 100vh;
     }
     .container {
-      margin: 20px;
+      margin: 20px; /* This already aligns it to the left with 20px margin, it doesn't center it explicitly */
       background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 245, 250, 0.95));
       padding: 30px;
       border-radius: 20px;
@@ -43,7 +43,8 @@
       -webkit-text-fill-color: transparent;
       background-clip: text;
       margin: 0 0 20px 0;
-      text-align: center;
+      /* text-align: center; REMOVED */
+      text-align: left; /* Explicitly left-align the title */
       font-weight: 600;
       text-shadow: 0 2px 4px rgba(255, 182, 193, 0.3);
     }
@@ -56,7 +57,8 @@
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
-      text-align: center;
+      /* text-align: center; REMOVED */
+      text-align: left; /* Explicitly left-align section titles */
       font-weight: 600;
       margin-bottom: 20px;
     }
@@ -65,10 +67,11 @@
       line-height: 1.8;
       font-size: 16px;
     }
-    .info img {
+    .info img.model-banner { /* Added a class for clarity */
       width: 85%;
       border-radius: 15px;
-      margin: 0 auto 15px;
+      /* margin: 0 auto 15px; REMOVED */
+      margin: 0 0 15px 0; /* Left-align the image with padding */
       display: block;
       box-shadow: 0 8px 25px rgba(255, 182, 193, 0.4);
       border: 2px solid rgba(255, 192, 203, 0.5);
@@ -131,14 +134,16 @@
       background-clip: text;
       margin: 0 0 15px 0;
       font-size: 22px;
-      text-align: center;
+      /* text-align: center; REMOVED */
+      text-align: left; /* Explicitly left-align card titles */
       font-weight: 600;
     }
     .model-tags {
       display: flex;
       gap: 10px;
       flex-wrap: wrap;
-      justify-content: center;
+      /* justify-content: center; REMOVED */
+      justify-content: flex-start; /* Left-align the tags */
     }
     .model-tag {
       background: linear-gradient(45deg, rgba(255, 182, 193, 0.4), rgba(255, 215, 0, 0.3));
@@ -161,7 +166,8 @@
       background-clip: text;
       margin: 0 0 20px 0;
       font-size: 18px;
-      text-align: center;
+      /* text-align: center; REMOVED */
+      text-align: left; /* Explicitly left-align sub-titles */
       font-weight: 600;
     }
     .composition-list {
@@ -209,7 +215,8 @@
       cursor: pointer;
       outline: none;
       padding: 8px 0;
-      text-align: center;
+      /* text-align: center; REMOVED */
+      text-align: left; /* Explicitly left-align summary text */
       font-weight: 600;
       transition: all 0.3s ease;
     }
@@ -218,7 +225,8 @@
     }
     .creator-section {
       margin: 20px 0;
-      text-align: center;
+      /* text-align: center; REMOVED */
+      text-align: left; /* Left-align the creator badge */
     }
     .creator-badge {
       display: inline-flex;
@@ -236,9 +244,6 @@
       font-weight: 500;
     }
     .creator-link {
-      display: flex;
-      align-items: center;
-      gap: 8px;
       color: #d63384;
       text-decoration: none;
       transition: all 0.3s ease;
@@ -266,9 +271,10 @@
       transform: translateX(3px);
     }
     .axolotl-container {
-      display: flex;
-      text-align: center; /* This is correctly applied to center the image itself */
-      justify-content: center;
+      display: flex; /* Kept flex display */
+      /* text-align: center; REMOVED */ /* No longer needed if justify-content is flex-start */
+      /* justify-content: center; REMOVED */
+      justify-content: flex-start; /* Align flex items to the start (left) */
       margin: 30px 0;
     }
     .axolotl-container img {
@@ -277,8 +283,9 @@
       box-shadow: 0 6px 20px rgba(255, 182, 193, 0.4);
       border: 2px solid rgba(255, 192, 203, 0.5);
       transition: transform 0.3s ease;
-      display: block; /* Make the image a block element */
-      margin: 0 auto; /* Center it horizontally within its parent */
+      display: block;
+      /* margin: 0 auto; REMOVED */ /* No longer needed, as flex container handles alignment */
+      margin: 0; /* Ensures no extra auto margins */
     }
     .axolotl-container img:hover {
       transform: scale(1.05);
@@ -291,8 +298,9 @@
       <h1>François-PE-Huali 12B</h1>
     </div>
     <div class="info">
-      <img src="https://cdn-uploads.huggingface.co/production/uploads/66c26b6fb01b19d8c3c2467b/DYgyLUEaHAv9kTffBYH-F.jpeg" alt="Model banner">
-      <div style="text-align: center;">
+      <!-- Added a class 'model-banner' for specific styling on the image -->
+      <img class="model-banner" src="https://cdn-uploads.huggingface.co/production/uploads/66c26b6fb01b19d8c3c2467b/DYgyLUEaHAv9kTffBYH-F.jpeg" alt="Model banner">
+      <!-- Removed the inline style div as text-align is now handled by CSS classes -->
       <div class="creator-section">
         <div class="creator-badge">
           <span class="creator-label">Created by</span>