Comecei a aprender layout com CSS há pouco tempo. Estou com o certo problema de que a lista no div(cinza) lateral não está ficando no centro. É fácil ver o meu problema na hora de executar o programa.
Acredito que o 'ul' desloque o 'li' para a direita.
Agradeço quem me ajudar a colocar a lista no meio com a borda 2px encaixada.
#geral {width: 100%;background: blue; border:2px solid;height: 5000px}
#teste {width: 100%; background: green;height: 100px; line-height: 100px; text-align: center; font-size: 80px}
#teste2 ul li{display: inline; padding: 10px}
#teste2 {width: 100%;height: 60px; line-height: 60px; text-align: center; font-size: 30%; background: yellow;position: relative;top: -80px}
#NavL {width: 20% ; background: grey; font-size: 20%; position: relative;top: -80px; height: 280px; line-height: 90px; float: left}
#NavL ul li {display: block;border:2px solid; text-align: center}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name='Description' content="Formas">
<title>Formas</title>
</head>
<body>
<div class=container id="geral">
<div id="teste">
<p>TESTE</p>
<div id="teste2">
<ul>
<li>Início</li>
<li>Contato</li>
<li>Mais informações</li>
</ul>
</div>
<div id="NavL">
<nav>
<ul>
<li>Mais caros</li>
<li>Mais baratos</li> <li>Infantil</li>
</ul>
</nav>
</div>
</div>
</body>
</html>