Проблема с выравниванием заголовка моей таблицы, вызванная плагином jquery DataTables ⇐ Jquery

[Anonymous]

введите здесь описание изображения. Я не уверен, повторяю ли я вопрос, если да, направьте в нужное место
Я использую таблицу данных и пытаюсь реализовать горизонтальную прокрутку по этой ссылке
https://datatables.net/examples/basic_i ... oll_x.html
У меня проблемы с моего стола. Мой центрирован, а нет, и я не могу найти, в чем проблема.
Это мой html-код
Это мой HTML-код
р>

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

Número Pokédex
Nombre
Tipo 1
Tipo 2
Región
Pre-evolución
Evolución

Это мой CSS

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

.opciones {
margin-top:122px;
padding:20px;
display: flex;
flex-wrap: wrap; /* Para permitir que se envuelvan a una nueva línea si el espacio es insuficiente */
justify-content: space-around;
color: white;
background-color: #3080f3;
border:0px;
}
.tabla-pokedex{
overflow-x: auto;
}
.tabla-pokedex table{
background-color: white;
text-align:center;
width: 100%;
border-collapse: collapse;
}

.tabla-pokedex th,td{
padding: 20px;
}
.tabla-pokedex thead{
background-color: #3080fe;
border-bottom: 5px solid #224dc2;
color: white;
}
.tabla-pokedex tbody tr:nth-child(even){
background-color:#c5c0c0;
}
.tabla-pokedex tr:hover{
background-color: #71a4f7
}

Я добавляю изображение, чтобы лучше рассмотреть эту проблему.
Я пытался изменить некоторые аспекты моего main.css с помощью Google инструменты разработчика, так как я использую BS5 (возможно, здесь ошибка).
Перед загрузкой плагина я проверил версию BS5, на всякий случай.

Подробнее здесь: https://stackoverflow.com/questions/784 ... ery-plugin