Bymas | блоки по горизонтали

пацаны не мо00гу блоки по горизонтали поставить, уже все перепробовал
пробовал через display:block; display:inline-block;
не помогает(((

.card-container {

 display: inline-block;

 	background-color: #fff;

 	border-radius: 5px;

 	box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);

 	color: #B3B8CD;

 	padding-top: 30px;

 	padding-bottom:30px;

 	position: relative;

 	width: 250px;

 	max-width: 100%;

 	text-align: center;

 }

1. Ты задаешь ширину width: 250px;
2. Дай весь код для чего блок??????!!

nefakt [],

.card-container {

 	background-color: #fff;

 	border-radius: 5px;

 	box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);

 	color: #B3B8CD;

 	padding-top: 30px;

 	padding-bottom:30px;

 	position: relative;

 	width: 250px;

 	max-width: 100%;

 	text-align: center;

 }

 

 .card-container .pro {

 	color: #231E39;

 	background-color: #FEBB0B;

 	border-radius: 3px;

 	font-size: 14px;

 	font-weight: bold;

 	padding: 3px 7px;

 	position: absolute;

 	top: 30px;

 	left: 30px;

 }

$q=mysql_query("SELECT `user`.`id` FROM `user` LEFT JOIN `user_group` ON `user`.`group_access` = `user_group`.`id` ORDER BY $sql_sort $por LIMIT $start, $set[p_str]");

 while ($ank = mysql_fetch_assoc($q))

 {

 $ank=get_user($ank['id']);

 

 echo '<div class="card-container"> 

 	<span class="pro">PRO</span>'; /////////////////

 

 avatar120($ank['id']);

 

 

 echo "<h3><a href='/info.php?id=$ank[id]'>$ank[nick]</a>".online($ank['id'])."</h3>";

 

 if ($ank['group_access']>1)echo "<span class='status'>$ank[group_name]</span><br />\n";

 

 if ($sort=='rating')

 echo "<span class=\"ank_n\">Рейтинг:</span> <span class=\"ank_d\">$ank[rating]</span><br />\n";

 if ($sort=='balls')

 echo "<span class=\"ank_n\">Рейтинг:</span> <span class=\"ank_d\">$ank[balls]</span><br />\n";

 

 if ($sort=='pol')

 echo "<span class=\"ank_n\">Пол:</span> <span class=\"ank_d\">".(($ank['pol']==1)?'Мужской':'Женский')."</span><br />\n";

 

 if ($sort=='id')

 echo "<span class=\"ank_n\">Регистрация:</span> <span class=\"ank_d\">".vremja($ank['date_reg'])."</span><br />\n";

 echo "<span class=\"ank_n\">Посл. посещение:</span> <span class=\"ank_d\">".vremja($ank['date_last'])."</span><br />\n";

 

 

 if (user_access('user_prof_edit') && $user['level']>$ank['level'])

 {

 echo "<a href='/adm_panel/user.php?id=$ank[id]'>Редактировать профиль</a><br />\n";

 }

 

 echo '<div class="buttons">

 		<button class="primary">

 			Message

 		</button>

 		<button class="primary ghost">

 			Following

 		</button>

 	</div>

 

 </div>'; //////////////////////

 

 }

https://jsfiddle.net/04aco27y/1/
________
посл. ред. 17.08.2021 в 16:56; всего 1 раз(а); by GooDLike

nefakt [], мне над что бы в 2 ряда было

Изображение

------

78681_M58s6A3UZC8.jpg (357.9 Kb)
Скачиваний: 133

GooDLike, не помогло

155876556 (17.08.2021 в 16:58)
GooDLike, не помогло

весь цикл с card-container, надо обернуть в еще один див
https://jsfiddle.net/u1xs0ca4/
________
посл. ред. 17.08.2021 в 17:24; всего 1 раз(а); by GooDLike

.card-list: 

 {

  display: flex;

   flex-direction: row;

   flex-wrap: wrap;

 }

 

 .card-container {

  flex-grow: 1;

 	background-color: #fff;

 	border-radius: 5px;

 	box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);

 	color: #B3B8CD;

 	padding-top: 30px;

 	padding-bottom:30px;

 	width: 250px;

 	text-align: center;

 }

GooDLike,

сделал так не помогло

GooDLike, получилось так на всю страницу

Изображение

------

78686_EvPTR3M6phU.jpg (361.1 Kb)
Скачиваний: 112

155876556 (17.08.2021 в 17:28)

.card-list: 

 {

  display: flex;

   flex-direction: row;

   flex-wrap: wrap;

 }

 

 .card-container {

  flex-grow: 1;

 	background-color: #fff;

 	border-radius: 5px;

 	box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);

 	color: #B3B8CD;

 	padding-top: 30px;

 	padding-bottom:30px;

 	width: 250px;

 	text-align: center;

 }

GooDLike,

сделал так не помогло

что там за двоеточие после card-list?