Помогите пожалуйста разобрать в css, не до конца понял

Question

Помогите пожалуйста разобрать в css, не до конца понял

Mijaster Studios Ученик (99), на голосовании 1 год назад

Пожалуйста, помогите настроить проекты в строку, а не в столбик. Не до конца понял как это сделать.

Html: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Karla:wght@600;800&family=Lumanosimo&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Karla:wght@600;800&family=Lumanosimo&family=Raleway:wght@500&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="img/logo1.png">
<title>Main</title>
</head>
<body>

<div id="content">
<div class="projects-content" style="background-image: url(img/bg7.jpg);">
<h2 class="projects">-Проекты-</h2>
<div class="c">
<div class="project">
<img src="img/pv.png" alt="" class="poster" width="15%">
<p class="name">Outsider</p>
<p class="date">Релиз 2023</p>
</div>

<div class="project">
<img src="img/pv.png" alt="" class="poster" width="15%">
<p class="name">D.I.E.</p>
<p class="date">Демо 2023</p>
</div>
</div>
</div>
</div>

</div>

</body>
</html>

Css:

 .projects-content {
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	min-height: 790px;
	text-align: center;
	align-items:baseline;
}

.poster {
	border-radius: 5px;
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.name {
	font-weight: 800;
	font-size: 20px;
}

.date {
	font-size: 16px;
	font-weight: 400;
	opacity: .5;
}

Answer 1

Для того чтобы разместить проекты в одну строку (горизонтально), вам нужно применить к контейнеру `.c` стиль `display: flex;`.

Добавьте в ваш CSS:

```css
.c {
display: flex;
justify-content: center; /* выравнивание элементов по центру */
gap: 20px; /* расстояние между элементами */
}
```

Этот код сделает так, чтобы элементы внутри `.c` размещались горизонтально. Вы также можете регулировать расстояние между элементами, изменяя значение `gap`.