Horizontal nav bar: image (logo) on the left, menu on the right. But I can't make it work!

I'm trying to code a responsive horizontal navigation bar across the top of my website.

On a small screen, I was trying to center the logo and put the menu bar to the far right. On screens over 515px, I'm trying to put the logo (an img) on the far left of the container, and a menu button (another img) on the far right, leaving the space between white.

When I try to add a media query for a bigger screen, I get no response. I'm using flexbox and the space-between feature, but it won't work!

Main container is called 'mainNav'. My logo is called 'logo' My menu button is called 'menu'.

<div class="mainNav">
            <img class="logo" src="Logo.png" id="logo" a href="index.html"> 

            <img class="menu" src="img/menu.png" id="menuButton" a href="menu">
</div>

Here's my small-screen css:

.mainNav {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: auto;
    width: 80%;
    padding: 2% 0;
}

.logo {
    margin: auto;
    width: 50%;
    height: 100%;
}

.menu {
    padding-right: 2%;
}

and here's my bigger screen css (that won't work):

@media (min-width: 515px) {

    .mainNav {
        display: flex;
        flex direction: row;
        justify-content: space-between;
        }

}

Thanks for any help!!!