Bootstrap and Media Queries [closed]

I have this nav-bar and I am trying to use a media query to either remove it entirely (Display: none or Visibility: hidden), or stop bootstrap from collapsing it into a button. I have been unsuccessful with both and haven't found a solution.

I'm not the most fluent with Css and Html, could I get some insight into the usual causes of these problems.

@media (max-width: 768px) {     .Nav1 {         display: none;     } }

Note: It is linked correctly and works on another nav-bar that uses "Nav1" and other Css gets applied to it, it just seems like these efforts are futile.

<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 Nav1" id="mainNav">         <div class="container px-4 px-lg-5">             <div class="navbar-collapse p-2" id="navbarResponsive">                 <ul class="navbar-nav ms-auto my-2 my-lg-0">                     <li class="nav-item"><a class="nav-link" href="{% url 'contact' %}">Contact</a></li>                     <!--Logout button-->                     <li class="nav-item">                         <form method="POST" action="{% url 'logout' %}">                             {% csrf_token %}                             <button type="submit" class="btn btn-light">                                 Logout                             </button>                         </form>                     </li>                 </ul>             </div>         </div>     </nav>