Menu collapse problem (Bootstrap + Media Queries) - where did you go wrong?

Question

css

Hello.
There is such a piece wrapped in a div class container

<nav class="main_menu">
  <button class="main_menu_button hidden-md hidden-lg hidden-sm"><i class="fa fa-bars"></i></button>
  <ul>
    <li> <a href="#"> About me </a> </li>
    <li> <a href="#"> Work/Education </a> </li>
                <li> <a href="#"> Portfolio </a> </li>
    <li> <a href="#"> Contacts </a> </li>
  </ul>
</nav>

I set styles in media queries:

@media only screen and (max-width : 768px) {
.main_menu ul {
display: none;
width: 100%; margin: 0; padding: 0; right: 0;
position: absolute;       
text-align: center;
line-height: 1.8; background: #2b2b2c;
}
.main_menu ul li {
display: block;
width: 100%;
border-bottom:1px solid #595b5d;
margin: 0;
}
}

@media only screen and (min-width : 768px) {
  .main_menu ul {
    display: block !important;
  }
}

That is, < 768 -- hide the menu and give it new styles, > 768 -- show it back
Expand/Collapse like this:

$(".main_menu_button").click(function() {
  $(this).next().slideToggle();
});

Problem:
If > 768 or < 768, then everything is ok:

However, if resolution = 768, then the following picture is obtained:

There are no buttons yet, and the styles that expand the elements of the list to full width have already been applied.
Where did I go wrong and how can I fix it? Thank you.
I apologize for the tabulation, I flew off somewhere.

Answer 1

@media only screen and (width : 768px) {
  .main_menu ul {
    display: block !important;
  }
}

what if we add more?
or give min-width: 767px, then close this value

Answer 2

Gotta do it like this

@media only screen and (max-width : 768px)
@media only screen and (min-width : 769px)

because at 768px both rules will apply

Answer 3

media only screen and (min-width : 768px) {
fix here --> media only screen and (max-width : 767px) {
transition values ​​767 and 768