Update style.css

style.css

@@ -48,7 +48,7 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 80%;
+    width: 100%;
     max-width: 800px;
     margin: 0 auto;
     padding: 30px;
@@ -66,10 +66,10 @@ body {
     font-weight: bold;
     font-size: 16px;
     display: block;
+    margin-bottom: 5px;
 }
 
 .currency-box input {
-    margin-top: 5px;
     padding: 15px;
     font-size: 16px;
     width: 100%;
@@ -81,15 +81,17 @@ body {
 .currency-select {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     width: 100%;
-    margin-bottom: 20px;
     flex-wrap: wrap; /* Allows wrap on small screens */
+    margin: 20px 0;
 }
 
 .currency-group {
+    display: flex;
+    flex-direction: column;
     margin: 10px;
-    text-align: left;
+    flex-grow: 1;
 }
 
 .currency-group label {
@@ -100,7 +102,7 @@ body {
 .currency-group select {
     padding: 10px;
     font-size: 16px;
-    width: 150px;
+    width: 100%;
     border-radius: 8px;
     border: 1px solid #ccc;
     box-sizing: border-box;
@@ -115,10 +117,7 @@ body {
     border: none;
     transition: background-color 0.3s;
     font-size: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0 10px;
+    margin: 10px 0;
     height: 50px;
     width: 50px;
 }