Update living-richly-guide.html

1 file changed +32 −20

Diff

diff --git a/living-richly-guide.html b/living-richly-guide.html
index 63fd806..d13dca0 100644
--- a/living-richly-guide.html
+++ b/living-richly-guide.html
@@ -124,35 +124,47 @@
       .section-title-wrapper {
         text-align: center;
         margin-bottom: 2.5rem;
-        position: relative;
+
+      }
+
+
+      .section-main-title {
+        color: var(--color-onyx);
+        font-family: var(--font-serif);
+        font-weight: 600;
+        font-size: 2.8rem;
+        letter-spacing: 0.5px;
+        display: inline-block; /* This allows the element's width to be determined by its content */
+        padding: 0 1.5rem;   /* This padding is inside the title's box, around the text */
+        position: relative;   /* This is necessary for its pseudo-elements to be positioned relative to it */
       }
-      .section-title-wrapper::before,
-      .section-title-wrapper::after {
+
+      /* ----- ADD THESE NEW RULES for .section-main-title::before and ::after ----- */
+      .section-main-title::before,
+      .section-main-title::after {
         content: "";
         display: block;
-        width: 80px;
+        width: 80px;    /* Width of the decorative line */
         height: 2px;
         background-color: var(--color-gold);
         position: absolute;
-        top: 50%;
+        top: 50%; /* Vertically centers the line with respect to the title's height */
         transform: translateY(-50%);
       }
-      .section-title-wrapper::before {
-        left: calc(50% - 50px - 190px);
-      } /* Adjusted for title width */
-      .section-title-wrapper::after {
-        right: calc(50% - 50px - 190px);
-      } /* Adjusted for title width */
 
-      .section-main-title {
-        color: var(--color-onyx);
-        font-family: var(--font-serif);
-        font-weight: 600;
-        font-size: 2.8rem;
-        letter-spacing: 0.5px;
-        display: inline-block;
-        padding: 0 1.5rem;
-        position: relative;
+      .section-main-title::before {
+        /* Positions the line to the left of the .section-main-title's bounding box */
+        right: 100%;
+        /* Creates a visual gap between the title's edge (including its padding) and the line.
+           The 50px value is based on the '50px' in your original calc, adjust if you want a different gap. */
+        margin-right: 50px;
+      }
+
+      .section-main-title::after {
+        /* Positions the line to the right of the .section-main-title's bounding box */
+        left: 100%;
+        /* Creates a visual gap, matching the one on the left. */
+        margin-left: 50px;
       }
 
       .principle-card {