Rasterelemente werden nicht zentriert ⇐ CSS

[Guest]

Ich erstelle eine React-Komponente mit einem Rasterlayout und habe Probleme, das gesamte Raster in seinem Container zu zentrieren. Ich verwende Flexbox für das Layout, aber die Rasterelemente werden nicht richtig zentriert.
Hier ist das Setup:

• Ich habe einen Container, der seine untergeordneten Elemente sowohl horizontal als auch vertikal zentrieren soll.
• Im Container rendere ich drei Karten, die in einem responsiven Raster angezeigt werden sollen.

Hier ist mein Code:

Code: Select all

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;

So sieht es derzeit aus:https://ibb.co/hFScmDX
Vielen Dank!