Не могу сделать карточки товара каким образом мне это сделать?

Question

[dudchenko666]

Пишу код по гайдам из справочников,ничего не работает не display:flex; не float:left/right;
МОЙ КОД НИЖЕ:

Вот код HTML - карточка товара

<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>

Вот моя адаптивная вёрстка

#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;
}

Comments

[Alex_mos]

А зачем такой большой паддинг?
padding-right: 900px;

И нужно использовать класс вместо id, так как не может быть несколько элементов с одинаковым классом, id должен быть уникальным для одного элемента

[Vladislav]

Не стилизуйте селектор id в css никогда

[Froggyweb]

Да вроде все работает, что ни так?
зы padding конечно лишний, он вызывает горизонтальную прокрутку.....

[Vova135798]

Добавьте код в codepen.io. Так будет удобнее.

Answer 1

[dudchenko666]

Итак ,ответ я сам нашёл ,спасибо за ваши советы, я к ним прислушался и начал писать код заново.
И оказалась ,что лишнее являлось вот этот код margin:auto;