centering with flex does't work

Hello everyone!
I'm a beginner in web programming, I created a website just for practice and I got stuck when I try to center the span elements displayed with flex as seen in the attached printscreens.
It looks better in the second printscreen when I display borders for each span element.
Do you have any idea how to do it?

<!DOCTYPE html>
<html>
<head>
	<title>Table 01</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
 
<body>
	<div class="container">

Syndicate content