I can't make product cards, how can I do it?

Question

css

I am writing code according to guides from reference books, nothing works, display: flex; not float:left/right;
MY CODE BELOW:

Here is the HTML code - product card

<div id="product">
    <div id="product-list">
      <h3>Among us</h3>
      <img src="img/goods/AmongUs.png">
      <p class="price">$1,76</p>
      <p><button>Описание</button></p>
    </div>
  </div>

Here is my responsive layout

#product{
  margin: 10px;
  padding-left:25px; 
  padding-top: 50px;
  padding-right: 900px;
  background: #171717;
  background: ;
  font-size: 16px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
}
#product-list{
  padding-left: 2px;
  margin-right: 25px;
  background: ;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  	width:290px;
 	margin: auto;
  	text-align: center;
 	 font-family: arial;
 	 border-radius: 10px 10px;

}
#product-list img{
  max-height: 15%;
  display:inline-block;
  width: 220px;
  border-radius: 70px;
}
.price {
  color: grey;
  font-size: 22px;
}
#product-list button {
  border-radius: 12px 12px;
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #1c1a1a;
  text-align: center;
  cursor: pointer;
  width: 80%;
  font-size: 18px;
}

#product-list button:hover {
  opacity: 0.7;
}

Answer 1

So, I found the answer myself, thanks for your advice, I listened to them and started writing the code again.
And it turned out that this code was superfluousmargin:auto;