I'm creating a web page using the JQuery mobile framework. I need to place a navigation bar at the bottom of the page inside the footer. Here I mentioned my all codes. My problem is that the last navigation item is not placed properly. It little bit shift to down. I couldn't identify what I went wrong. Sorry for last all the lines in the same row. I did it because otherwise, it shows as a table on the preview area
<!DOCTYPE html>
<html lang ="en">
<head>
<Title>PHI Admin panel</title>
<meta http-equiv = "text/html"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="Sidath"/>
<meta name="description" content="NHSL PHI admin panel"/>
<script type ="text/javascript" src ="../code.jquery.com_jquery-3.7.1.min.js"></script>
<script type ="text/javascript" src ="jqm/jquery-migrate-3.0.0.js"></script>
<script type ="text/javascript" src ="jqm/jquery.mobile-1.4.5.min.js"></script>
<link rel ="stylesheet" type = "text/css" href ="jqm/jquery.mobile-1.4.5.css"/>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>PHI Admin</h1>
</div>
<!-- /header -->
<div role="main" class="ui-content">
<p>Page content goes here.</p>
</div>
<!-- /content -->
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="grid">Summary</a></li>
<li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
<li><a href="#" data-icon="gear">Setup</a></li>
</ul>
</div>
<!-- /navbar -->
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
