Mobile menu button jumping around - css

Question

I am building a website for my church,
https://new.churchindenver.org/
and I have a mobile "Menu" button that opens the mobile menu, and a "Close" button that closes it.
Both have the following CSS:
display: inline;
position: absolute;
top:10px;
right: 10px;
I want the menu button to be in absolute position
top:10px;
right: 10px;
When the screen width is 601-895px it works fine. When the screen width is <=600px, the css is being ignored and the "Menu" button jumps down about 50px. (and the logo jumps down too, incidentally, though not as far) Does anyone have any idea why?
Thanks!
Whether ! important or not, and no matter what I put there, the menu button (and the logo) are in absolute position, but apparently not to their parent element.
UPDATE:
Based on Elraphty's suggestion, I made the following hack, which seems to fix it. I'm still not sure what's going on, but at least it looks right. I put:
#media (max-width: 600px) {
#menu {
top: -41px ! important;
}
#logo {
top: -10px ! important;
}
}
and now the menu button and logo are in their proper position at top 10px.

Answer 1

The error is caused by
top:10px;
right: 10px;
Since they both have absolute positions, the solution write a media query than changes the top and right values when the screen is lesser than 600px e.g
#media screen and (max-width: 600px) {
. class {
top: 5px ! important;
right: 5px ! important;
}
}

Answer 2

You can also do this
.nav {
position: relative
}
.navItems {
display: inline;
position: absolute;
top:10px;
right: 10px;
}
So the items are positioned absolute in the nav element not the body element
Or use flex
.nav {
height: 100px;
display: flex;
flex-direction: row;
justify-content: center;
}