Как заставить кнопки появляться рядом друг с другом в мобильной версии навигационной панели?

Question

Я пишу страницу howtobeapp.com. Но навигационная панель для маленьких окон просмотра не выглядит так, как я хочу. Я хочу, чтобы ссылки были кнопками рядом друг с другом. Flex также не работает. Я думаю, что это из-за мобильного JQuery может быть?

		<div data-role="footer" id="footer1">
			<div data-role="navbar" id="nav">
				<ul>
				<li id="eins"><a href="impressum.html" data-icon="user" target="_blanc">Imprint</a></li>
				<li id="zwei"><a href="#p1" data-icon="home" class="ui-btn-active">Home</a></li>
				<li id="drei"><a href="https://play.google.com/store/apps/details?id=com.lifestyleapp.howtobe" data-icon="arrow-d">download</a></li>
				</ul>
			</div>
		</div>

@media (max-width: 600px){
    #nav {
        left:0; 
        margin: 0; 
        z-index. 10; 
        display: grid; 
    }

    #eins{
        grid-column: 1/2; 
    }
    #zwei{
        grid-column: 2/3; 
    }
    #drei{
        grid-column: 3/4; 
    }


    li a {
        color: white;
        text-decoration: none; 
    }

    li {
        list-style: none; 
        display: block; 
        color: white; 
    }


    #footer1{
            background-color: rgba(30,130,220,0.9); 
            position: fixed; 
            bottom: 0; 
            width: 100vw; 
    }



}