improve styling

Author: jdcodebase

src/App.css

@@ -8,6 +8,11 @@
   color: #fff;
 }
 
+.container {
+  background-color: burlywood;
+  padding: 2% 5%;
+}
+
 .count {
   background-color: #fff;
   color: #000;
@@ -17,6 +22,7 @@
   font-size: 20px;
   font-weight: 500;
   margin-bottom: 10px;
+  text-align: center;
 }
 
 span {

src/App.jsx

@@ -28,29 +28,35 @@ const App = () => {
 
   return (
     <div className="main">
-      <p className="count">
-        Count :{" "}
-        <span
-          style={{
-            color: count >= 0 && count <= 6 ? "#000" : "red",
-          }}
-        >
-          {" "}
-          {count}
-        </span>
-      </p>
-      {error && <p className="error">{error}</p>}
+      <div className="container">
+        <p className="count">
+          Count :{" "}
+          <span
+            style={{
+              color: count >= 0 && count <= 6 ? "#000" : "red",
+            }}
+          >
+            {" "}
+            {count}
+          </span>
+        </p>
+        {error && <p className="error">{error}</p>}
 
-      <div>
-        <button className="btn inc" onClick={handleInc}>
-          Inc
-        </button>
-        <button className="btn reset " onClick={handleReset}>
-          Reset
-        </button>
-        <button className="btn dec" disabled={count === 0} onClick={handleDec}>
-          Dec
-        </button>
+        <div>
+          <button className="btn inc" onClick={handleInc}>
+            Inc
+          </button>
+          <button className="btn reset " onClick={handleReset}>
+            Reset
+          </button>
+          <button
+            className="btn dec"
+            disabled={count === 0}
+            onClick={handleDec}
+          >
+            Dec
+          </button>
+        </div>
       </div>
     </div>
   );