pagintaion out of place and I can't change it in css

Question

Heyy, I'm new to html and css and I'm trying to change some code in a group project but when I checked, the pagination is out of place?? I tried using float to put it in the center or even change its color but it looks like its not detecting the css at all? How do I fix this? Thank you!

Here's the code:

pagination.html:

{% load static %}
<!-- Pagination -->
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
<div class="container">
  <nav class='my-3 container'>
    <ul class="pagination d-flex justify-content-center">
        {% if page_obj.has_previous %}
      <li class="page-item">
        <a class="page-link" href="?page={{page_obj.previous_page_number}}" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      {% endif %}
      {% for i in page_obj.paginator.page_range %}
      {% if page_obj.number == i %}
      <li class="page-item active"><a class="page-link" href="#">{{i}}</a></li>
      {% else %}
      <li class="page-item "><a class="page-link" href="?page={{i}}">{{i}}</a></li>
      {% endif %}
      {% endfor %}
      <li class="page-item">
          {% if page_obj.has_next %}
        <a class="page-link" href="?page={{page_obj.next_page_number}}" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
      {% endif %}
    </ul>
  </nav>
</div>

style.css:

nav {
  color: gray;
  float: center;
}

photo of it: