basket buttons on page

shop/src/App.css

@@ -255,13 +255,21 @@ button {
 
 .basketInner {
   display: flex;
-  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
   width: 80%;
   background-color: rosybrown;
 }
 .basketInner .oneGood {
-  height: 270px;
+  height: 370px;
 }
+.basketButoons {
+  display: flex;
+}
+.basketInner .oneGood button {
+  width: 40px;
+}
+
 .footer {
   position: fixed;
   width: 100%;
@@ -350,7 +358,7 @@ button {
     width: 100%;
   }
   .basketInner .oneGood {
-    height: 200px;
+    height: 270px;
   }
 
   .oneGood {

shop/src/components/basket.js

@@ -53,14 +53,17 @@ const BasketPage = ({basket, getData, GoodsArr, className = "goods"}) => {
     return (
         <>
             <div className = "basketInner">
-                <div className = {className}>
-                    {GoodsArr.map((good) => <div><OneGood key = {good._id} id = {good.id}
+
+                    {GoodsArr.map((good) => <div className = "oneGood"><OneGood key = {good._id} id = {good.id}
                     name = {good.name} price = {good.price} image = {good.image ? `${urlUpload}/${good.image[0].url}` : `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}/>
-                    <h4>{good.count}</h4>  
-                    <button>З кошика</button>         
-                    </div>
-                    )}
-                </div>
+                    <div className = "basketButoons">
+                        <button>+</button> 
+                        <h4>{good.count}</h4>    
+                        <button>-</button>   
+                    </div>    
+            </div>
+            )}
+
             </div>
         </>
     )