Estou montando um site que tem 3 "menus" superiores com informações diferentes. Meu terceiro menu (nav) deveria vir logo abaixo do 2º, mas está sendo colocado entre o 1º e o 2º. Não estou entendendo qual pode ser o problema.
Também estou com problemas para definir uma font-family no body (não está no código abaixo mas, quando eu coloco, a fonte não é aplicada para nada).
CÓDIGO HTML
<!DOCTYPE html>
<html lang = "pt-br">
<head>
<meta charset = "UTF-8">
<title>Site de terapia padrão</title>
<link rel = "stylesheet" href= "stylesheet.css">
<link rel = "stylesheet" href= "reset.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<header class = "header">
<div class = "caixa-top-informacoes">
<!-- HTML NAV 1 - INFORMAÇÕES DO TOP-->
<nav class = "lista-top">
<li>Atendimento de Segunda a Sexta das 9h às 18</li>
<img class = "img-localizacao" src = "imagens/icon-localizacao.png">
<li> Avenida Endereço, 1234, São Paulo - SP </li>
<img class = "img-email" src = "imagens/icon-email.png">
<li> email@provedor.com.br </li>
<li>Primeira consulta com valores especiais </li>
</nav>
</div>
<!-- HTML NAV 2 - LOGO E TELEFONE-->
<div class = "caixa-meio-telefone">
<nav class = "lista-meio">
<img class = "logo" src = "imagens/logo-generico-tratado.png">
<li> Ligue agora: 0800 99 99</li>
<li><input class = "botao-consulta" type="submit" value = "Marque uma consulta"></li>
</nav>
</div>
<!-- HTML NAV 3 - MENU NAVEGAÇÃO-->
<div class = "caixa-menu-navegacao">
<nav class = "lista-navegacao">
<li>Principal</li>
<li>Sobre</li>
<li>Serviços</li>
<li>Novidades</li>
<li>Contato</li>
</nav>
</div>
</header>
</body>
</html>CÓDIGO CSS
.header{
width:100%;
}
.caixa-top-informacoes{
background:rgb(245,245,245,1);
top:0px;
width:100%;
padding:1em;
text-align: center;
}
.img-localizacao{
width:10px;
}
.img-email{
width:15px;
}
.lista-top li {
display:inline;
padding:0px 15px 0 0;
position:flex;
font-size:14px;
color:#42474c;
}
.lista-top li:nth-child(1){
padding:0 200px 0 0;
}
.lista-top li:nth-child(6){
color:#3d3272;
font-weight:600;
}
/* CSS PARA A NAV 2 - MEIO*/
.caixa-meio-telefone{
width:100%;
position: absolute;
text-align: center;
}
.lista-meio{
padding:50px;
}
.lista-meio li {
font-size:14px;
color:#42474c;
display:inline;
padding-left:50px;
}
.lista-meio .logo {
width:150px;
padding-right:150px;
vertical-align: middle;
}
.lista-meio li:nth-child(2){
color:#007ac8;
font-size:2em;
}
.botao-consulta{
color:purple;
padding:20px 35px;
border-radius: 5px;
border:none;
background:#00c8b7;
font-size:1em;
color:white;
text-transform: uppercase;
cursor: pointer;
font-weight:bold;
transition: 0.5s;
}
.botao-consulta:hover{
background:#007ac8;,
transition: 0.5s;
}
/* CSS PARA A NAV 3 - NAVEGAÇÃO*/
.caixa-menu-navegacao{
width:100%;
}
.lista-navegacao li {
font-size:14px;
display:inline;
padding-left:50px;
}
