Why display: none doesn't work?

Question

css

I want to make a menu - a hamburger in the mobile version. But to be visible only in the mobile version. And in full screen mode, the usual menu. I can see both in the mobile version and in full screen mode, display: none does not work. What can be done?
There is html code:

<div class="col-xl-auto">
  <button class="top-nav_btn">
    <i class="icon-menu"></i>
  </button>
    <ul class="top-nav_menu">
      <li><a href="#">Главная</a></li>
      <li><a href="#">О компании</a></li>
      <li><a href="#">наши услуги</a></li>
      <li><a href="#">Структура</a></li>
      <li><a href="#">инвесторам</a></li>
      <li><a href="#">контакты</a></li>
    </ul>
  </div>

Sass:

.top-nav
    background-color: $white
    padding: 15px
    position: relative
    &_btn  
        display: none 
        width: 30px
        height: 30px
        background-color: transparent
        border: none
        font-size: 18px  
        position: absolute
        right: 15px
        top: -50px

Here is media.sass:

@media (max-width: 480px)
  .top-nav
    &_btn
      display: block

Answer 1

Classes are different

Answer 2

Everything, the issue is resolved. Just overridden by another selector