fix(style): Change the css styling for different screen size

src/styles/footer.css

@@ -30,7 +30,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  flex-shrink: 0;
+  flex: 1;
+  min-width: 0;
   gap: 24px;
   overflow: clip;
 }
@@ -133,10 +134,6 @@
     gap: 20px;
   }
 
-  .site-footer__legal {
-    white-space: nowrap;
-  }
-
   .site-footer__spacer {
     display: block;
     flex: 1;
@@ -144,13 +141,13 @@
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1023px) {
   .site-footer {
     padding: 120px 0;
   }
 
   .site-footer__inner {
-    padding: 0;
+    padding: 0 24px;
   }
 
   .site-footer__top {
@@ -160,3 +157,13 @@
     gap: 0;
   }
 }
+
+@media (min-width: 1280px) {
+  .site-footer__inner {
+    padding: 0;
+  }
+
+  .site-footer__legal {
+    white-space: nowrap;
+  }
+}