Configure my Datatable (Bootstrap) headers padding using Javascript and CSS

Question

I need to configure the padding of my Datatable (Bootstrap) headers through Javascript and CSS, because the arrows are getting too close to the header titles and getting cluttered when the columns are scaled. I tried using JS, but I couldn’t... Someone knows how to help me?

.align-right {
    text-align: right;
    /*max-width: 80px*/
}

.align-left {
    text-align: left;
    /*max-width: 80px*/
}

.align-center {
    text-align: center;
    /*max-width: 80px*/
}

table.center-header th {
    text-align: center;
}

table.dataTable thead span.sort-icon {
    display: inline-block;
    padding-left: 23px;
    width: 16px;
    height: 16px;
}

<table class="table table-hover table-bordered dataTable table-striped width-full center-header table-responsive" id="bancoGridDataTable">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Id)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.PessoaViewModel.PessoaNatureza)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.PessoaViewModel.PessoaJuridicaViewModel.RazaoSocial)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.PessoaViewModel.PessoaJuridicaViewModel.NomeFantasia)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.CodigoBanco)
                    </th>
                    <th>
                        @Html.DisplayName("Ações")
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.PessoaViewModel.PessoaNaturezaDescricao)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.PessoaViewModel.PessoaJuridicaViewModel.RazaoSocial)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.PessoaViewModel.PessoaJuridicaViewModel.NomeFantasia)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.CodigoBanco)
                    </td>

                    <td style="white-space: nowrap;">
                        <a asp-action="Edit" asp-route-id="@item.Id" title="Editar" class="btn btn-sm btn-icon btn-pure btn-default on-default edit-row">
                            <span class="icon-2x wb-edit"></span>
                        </a>
                        <a asp-action="Details" asp-route-id="@item.Id" title="Detalhes" class="btn btn-sm btn-icon btn-pure btn-default on-default footable-row-detail-row">
                            <span class="icon-2x wb-search"></span>
                        </a>
                        <a asp-action="Delete" asp-route-id="@item.Id" title="Excluir" class="btn btn-sm btn-icon btn-pure btn-default on-default remove-row">
                            <span class="icon-2x wb-trash"></span>
                        </a>
                        <button type="button" class="btn btn-sm btn-icon btn-pure btn-default on-default remove-row" title="Histórico" data-id="@item.Id" data-toggle="modal" data-target="#customerHistory" data-original-title="Histórico">
                            <span class="icon-2x wb-time"></span>
                        </button>

                    </td>
                </tr>
                }
            </tbody>
        </table>

 <script type="text/javascript">
        $('#bancoGridDataTable').DataTable({
            "columnDefs": [
                { className: "align-right", "targets": [4] },
                { className: "align-center", "targets": [5] },
                { className: "align-right", "targets": [0] },
                { className: "table.dataTable thead span.sort-icon", "targets": [0] }
            ],
            language: {
                "sEmptyTable": "Nenhum registro encontrado",
                "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                "sInfoPostFix": "",
                "sInfoThousands": ".",
                "sLengthMenu": "_MENU_ resultados por página",
                "sLoadingRecords": "Carregando...",
                "sProcessing": "Processando...",
                "sZeroRecords": "Nenhum registro encontrado",
                "sSearch": "Pesquisar",
                "searchPlaceholder": "Pesquise qualquer coisa",
                "oPaginate": {
                    "sNext": "Próximo",
                    "sPrevious": "Anterior",
                    "sFirst": "Primeiro",
                    "sLast": "Último"
                },
                "oAria": {
                    "sSortAscending": ": Ordenar colunas de forma ascendente",
                    "sSortDescending": ": Ordenar colunas de forma descendente"
                }
            }            
        });