diff --git a/src/components/Contact/contact.scss b/src/components/Contact/contact.scss
index 55dbe17..49f0fb5 100644
--- a/src/components/Contact/contact.scss
+++ b/src/components/Contact/contact.scss
@@ -16,8 +16,8 @@
   /* 1. Add a comma to target both the old component and your new section! */
   .contact-details, .committee-contacts {
     margin-top: 1rem;
+    width: 100%; /* Add this to ensure the container spans the full width */
 
-    /* 2. Add some styling so the new Committee Emails heading looks nice */
     h2 {
       font-size: 2.5rem;
       margin-top: 4rem; 
@@ -28,26 +28,33 @@
 
     ul {
       row-gap: 1rem;
-      /* Optional: Forces the list to stack neatly in the center */
       display: flex;
       flex-direction: column;
-      align-items: center;
+
+      /* 1. Align the list items to the left so the icons line up perfectly */
+      align-items: flex-start;
+      
+      /* 2. Shrink the invisible box around the list, then center that box! */
+      width: fit-content;
+      margin: 0 auto;
+
       list-style: none;
       padding: 0;
 
       li {
         a {
-          /* Optional: perfectly aligns your MailIcon next to the email text */
           display: flex;
           align-items: center;
           gap: 0.75rem;
           text-decoration: none;
-
           color: $dark;
           font-size: 1.5rem;
           
           svg {
             color: $dark;
+            /* Optional: Give the icon a strict width so they don't resize differently */
+            width: 24px;
+            height: auto;
           }
           &:hover {
             border-bottom: 2px solid $dark;