Элементы сетки не центрируются ⇐ CSS

[Anonymous]

Я создаю компонент React с сеткой, и у меня возникли проблемы с центрированием всей сетки внутри контейнера. Я использую Flexbox для макета, но элементы сетки центрируются неправильно.
Вот настройка:

• У меня есть контейнер, который должен центрировать дочерние элементы как по горизонтали, так и по вертикали.
• Внутри контейнера я визуализирую три карточки, которые должны отображаться в адаптивной сетке.

Вот мой код:

Код: Выделить всё

import React from 'react';
import Section from './Section';
import ClipPath from './ClipPath';
import Arrow from './Arrow';
import BluetoothScannerIllustration from './Svg';

const About = () => {
return (


{/* Heading */}

We've Noticed A{' '}

Major
{' '}
Problem.


Transportation hubs are overcrowded,

‎ making people late and frustrated. It's time for a smarter
solution.







The Problem

Overcrowded transit areas, combined with inadequate infrastructure and poor planning, result in persistent delays that affect daily commuters and logistics.


[url=https://psychcentral.com/adhd/why-are-people-with-adhd-always-late]
Explore more
[/url]
[url=https://example.com/solution]
Learn More
[/url]
[url=https://example.com/impact]
Discover Impact
[/url]










);
};

export default About;

Вот как это выглядит сейчас: https://ibb.co/hFScmDX
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/793 ... -centering