Bootstrap datatable alignment probelm-Twitter bootstrap

I am using a Bootstrap table. But my table is not aligned in the center of the page. I want to align it to the center of the page.

Here is the view:

The data table is center at the right but on the left, it goes out from the center position. I want to make the whole datatable center aligned

Here is my code…

{% extends 'navigation.html' %}
{% load static %}
{% block body %}

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">

<script>
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>


<div class="container mt-5">

            <h2 class="text-center">VIEW ALL NOTES</h2>
           <HR>
    <table class="table table-bordered center "  align="center" id="example">
        <thead>
        <tr>
            <th>Sr. No.</th>
            <th>Uploaded By</th>
            <th>Uploading Date</th>
            <th>Branch</th>
            <th>Subject</th>
            <th>Download</th>
            <th>File Type</th>
            <th>Description</th>
            <th>Status</th>
            <th>Assign Status</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody >
        {% for i in notes %}
        <tr>
            <td>{{forloop.counter}}</td>
             <td>{{i.user.username}}</td>
             <td>{{i.uploadingdate}}</td>
            <td>{{i.branch}}</td>
            <td>{{i.subject}}</td>
            <td><a href="{{i.notesfile.url}}" class="btn btn-success" download>Download</a></td>
            <td>{{i.filetype}}</td>
            <td>{{i.description}}</td>
            <td>{{i.status}}</td>
            <td><a href="{% url 'assign_status' i.id %}" class="btn btn-success" >Assign&nbsp;Status</a></td>

            <td><a href="{% url 'delete_notes' i.id %}" class="btn btn-danger" onclick="return confirm('Are you sure?')">Delete</a></td>
        </tr>
        {% endfor %}
        </tbody>
    </table>

</div>

{% endblock %}

Thanks in advance…