Why is my nav not responsive?

import React, { FC, ReactNode } from 'react'
import DiscordLogo from './svg/DiscordLogo';

type Props = {}

const headerLinks = [
    {
        content: 'Download'
    },
    {
        content: 'Nitro'
    },
    {
        content: 'Discover'
    },
    {
        content: 'Safety'
    },
    {
        content: 'Support'
    },
    {
        content: 'Blog'
    },
    {
        content: 'Careers'
    }
];

export const Header: FC<Props> = (props) => {
    return (
        <header>
            <nav className='flex justify-between items-center bg-emerald-400 flex-row h-20'>
                <DiscordLogo className='text-white' />
                <ul className='flex flex-row'>
                    {headerLinks.map((link, index) => (
                        <HeaderLink key={index} content={link.content} className='text-white text-lg font-bold hover:underline underline-offset-1
                        p-3 mx-3'>
                            {link.content}
                        </HeaderLink>
                    ))}
                </ul>
                <Button className='rounded-full bg-white text-black cursor-pointer 
                    hover:shadow-lg 
                    hover:text-blurple transition
                    duration-200 ease-in-out
                    '
                >
                    Login
                </Button>
            </nav>
        </header>
    )
}

interface HeaderLinkProps {
    children: ReactNode;
    content: string;
    className?: string;
}

const HeaderLink: FC<HeaderLinkProps> = ({ content, children, className }) => {
    return (
        <li className='px-4'>
            <a href='#' className={`${className}`}>
                {children}
            </a>
        </li>
    )
}