gostaria de saber se possivel fazer um menu responsivo sem o mesmo quebrar de linha quando a tela for redimensionada.... tentei fazer com midia query porem não funcionou

        <header>

            <div class="container">


                <button class="abrir-menu"> Abrir Menu </button>

                <h1 class="logo"> <img src="imagem/logo.png" width="200px"> </h1> 




                <nav class="barra-nav">

                    <button class="fechar-menu">Fechar Menu</button> 


                    <ul class="menu-principal">
                        <li> <a href=""> Home </a> </li>
                        <li> <a href=""> Home </a> </li>
                        <li> <a href=">Home </a> </li>
                        <li> <a href=""> Home</a> </li>   
                        <li> <a href="">Home</a> </li>   
                        <li> <a href="">Home</a> </li>

                    </ul>
                </nav>

             <img src="imagem/foto.png">
            </div>

        </header>