Navbar com Navegação (bootstrap + JSF) com erro na estética

[aprendi]

Estou com problemas em chegar nesse resultado esperado:

eu usei o <h:link para fazer a navegação mas os links ficaram fora do padrão do bootstrap, ficou assim:

eu já tentei bastante mas não consigo ajeitar esse menu.
o código:

<h:head>
	<h:outputStylesheet library="css" name="bootstrap.min.css" />
</h:head>

<h:body>
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
		<a class="navbar-brand" href="#"> Teste</a>
		<div class="container">
			<div class="navbar-header">
				<a class="navbar-brand" href="#">Aplicacao</a>
			</div>
			<div id="navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li><h:link value="Pagina 1" outcome="lista" /></li>
					<li><h:link value="Pagina 2" outcome="lista" /></li>
					<li><h:link value="Pagina 3" outcome="lista" /></li>
					
				</ul>
			</div>
			<!--/.nav-collapse -->
		</div>
	</nav>

[Lucas_Camara]

Existe alguma outra lib para o jsf no projeto (como primefaces, por exemplo) ?

[aprendi]

não tem…