gave margin to form and fixed radio buttons

Author: Giontr

Form-Controls/index.html

@@ -45,23 +45,23 @@ <h1>Verify your order </h1>
 
         <div>
           <label for="very-small">XS</label>
-          <input type="radio" name="size" value="very-small" required>
+          <input type="radio" id="very-small" name="size" value="very-small" required>
         </div>
         <div>
           <label for="small">S</label>
-          <input type="radio" name="size" value="small" required>
+          <input type="radio" id="small" name="size" value="small" required>
         </div>
         <div>
           <label for="medium">M</label>
-          <input type="radio" name="size" value="medium" required>
+          <input type="radio" id="medium" name="size" value="medium" required>
         </div>
         <div>
           <label for="large">L</label>
-          <input type="radio" name="size" value="large" required>
+          <input type="radio" id="large" name="size" value="large" required>
         </div>
         <div>
           <label for="very-large">XL</label>
-          <input type="radio" name="size" value="very-large" required>
+          <input type="radio" id="very-large" name="size" value="very-large" required>
         </div>
         <!--Submit button -->
         <div>

Form-Controls/style.css

@@ -1,11 +1,22 @@
+form > div {
+  margin-bottom: 10px;
+}
+
 input[type="radio"] {
-  margin: 0 5px;
-  width: 18px;
-  height: 18px;
+  width: 20px;
+  height: 20px;
+  margin: 0 10px 0 0;
+  cursor: pointer;
+  flex-shrink: 0;
 }
-#sizeBox {
+#sizeBox > div {
+  padding: 8px 12px;       
+  min-height: 5px;        
   display: flex;
-  flex-direction: column;
-  margin-bottom: 20px;
-  border: 1px solid #a7a7a7;
+  align-items: center;
+}
+
+#sizeBox label {
+  cursor: pointer;
+  padding: 4px 0;
 }