React navbar can not apply media display none

I am working on a Navbar and I try to understand how it is functioning with React. I got trouble applying @media display: none to a button. Anyone has an idea where my mistake is?

Styling part:

export const NavBtn = styled.nav`

display:flex;
align-items: center;
background:red;
margin-left:-20%;

@media screen and(max-width:768px){
    display:none;
}
`

export const NavBtnLink = styled(LinkR)`

border-radius:50px;
background:black;
white-space:nowrap;
padding: 10px 22px;
color:white;
font-size:16px;
outline:none;
border:none;
transition: all 0.2s ease-in-out;
text-decoration:none;



&:hover{
    
    transition: all 0.2s ease-in-out;
    background:white;
    color:green;
}

@media screen and(max-width:768px){
    display:none;
}
`

structure part:

<...>
</NavMenu>
            <NavBtn>
                    <NavBtnLink to="/book">
                        Book a session
                    </NavBtnLink>
                </NavBtn>
        </NavbarContainer>

Thank you for any suggestion