Why is Hidden and md:flex properties not working in my nextjs site

<div className="hidden flex-1 items-center justify-center space-x-6 md:flex">

        <a className="headerLink">Product</a>

        <a className="headerLink">Explore</a>

        <a className="headerLink">Support</a>

        <a className="headerLink">Business</a>
        
      </div>``

The navigation ought to show on a large screen while it disappears on a small screen. for me to display the nav I have to change the hidden to flex, this would in turn display the navigation on the small screens also and I wouldn't want that