display: none; doesn't work

I have a problem to disable the mobile class when the page has a higher width than 760px. the rule: nav .mobile { display: none; } dosent work, I also tried with just .mobile, header .mobile, header.mobile and @media only screen and (min-width: 760px) { }. Google and chatgpt also couldnt help me. Here is the code: <header> <div class="content"> <a href="index.html" class="desktop logo">Fotomatic</a> <nav class="desktop"> <ul> <li><a href="#">Product detail</a></li> <li><a href="#">About us</a></li> <li><a href="#>Follow us <img class="icon" src="./resources/images/instagram.png"></a></li> </ul> </nav> <nav class="mobile"> <ul> <li><a href="#"><img src="./resources/images/ic-logo.svg"></a></li> <li><a href="#"><img src="./resources/images/ic-product-detail.svg"></a></li> <li><a href="#"><img src="./resources/images/ic-about-us.svg"></a></li> <li><a href="#" class="button">Join us</a></li> </ul> </nav> </div> </header>