adjust css margins

src/components/Vehicles.js

@@ -18,14 +18,14 @@ const Vehicles = () => {
   const [vehId, setVehId] = useState();
   const [fetchedVeh, setfetchedVeh] = useState([]);
   const inputTypes = [
-    "make",
-    "model",
-    "trim",
-    "color",
-    "year",
-    "category",
-    "mileage",
-    "price",
+    "Make",
+    "Model",
+    "Trim",
+    "Color",
+    "Year",
+    "Category",
+    "Mileage",
+    "Price",
   ];
   const handleIdInput = (e) => setVehId(e.target.value);
 
@@ -66,7 +66,7 @@ const Vehicles = () => {
           });
           setSavedVehicles(dbVehs);
         } else {
-          console.log("Error fetching vehicle data from database");
+          console.log("Error fetching data from database");
         }
       });
     } catch (error) {
@@ -119,23 +119,25 @@ const Vehicles = () => {
       <div className="vehicles-container">
         <h2 className="formHeader">Add A Vehicle to Your Queue</h2>
         <div className="vehiclesRow">
-          <div className="vehiclesColumn">
-            {inputTypes.map((type, i) => (
-              <div className="inputContainer">
-                <TextInput
-                  key={`${type}${i}`}
-                  className="text-input"
-                  name={type}
-                  placeholder={type}
-                  value={inputs[type] || ""}
-                  onChange={
-                    type === "mileage" || type === "price"
-                      ? handleNumChange
-                      : handleChange
-                  }
-                />
-              </div>
-            ))}
+          <div className="vehBox">
+            <div className="vehiclesColumn">
+              {inputTypes.map((type, i) => (
+                <div className="inputContainer">
+                  <TextInput
+                    key={`${type}${i}`}
+                    className="text-input"
+                    name={type}
+                    placeholder={type}
+                    value={inputs[type] || ""}
+                    onChange={
+                      type === "mileage" || type === "price"
+                        ? handleNumChange
+                        : handleChange
+                    }
+                  />
+                </div>
+              ))}
+            </div>
           </div>
         </div>
         <Button
@@ -166,7 +168,7 @@ const Vehicles = () => {
           ))}
         </div>
         <div className="getHeader">
-          <h2 className="formHeader">Get A Vehicle By Id</h2>
+          <h2 className="formHeader2">Get A Vehicle By Id</h2>
         </div>
         <div className="fetchBox">
           <div className="inputContainer">

src/styles/App.css

@@ -15,6 +15,7 @@ body {
 .vehicles-container {
   display: flex;
   flex-direction: column;
+  align-items: center;
   width: 100%;
   padding: 0px 30px;
   margin: 5px 20px;
@@ -23,6 +24,9 @@ body {
 .vehiclesRow {
   display: flex;
   flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
   width: 100%;
 }
 
@@ -51,6 +55,7 @@ body {
 .vehBox {
   padding: 5px 5px 8px 8px;
   border: 1px solid #5d86a8;
+  background-color: #fff;
   border-radius: 6px;
   max-width: 535px;
   flex: 1 0 auto;
@@ -64,6 +69,12 @@ body {
   letter-spacing: 0.08rem;
 }
 
+.formHeader2 {
+  letter-spacing: 0.08rem;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 .text-input {
   width: 100%;
   height: 24px;
@@ -153,6 +164,11 @@ body {
 
 .fetchBox {
   margin-bottom: 25px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
 }
 
 @media only screen and (max-width: 460px) {