Gostaria, além da logo e dos três topicos (Home, Produtos, contato) colocar uma informação no meio, como faço para dividir o espaço ,inamicamente, em três ? para que o computador saiba dividir dependendo do tamanho do monitor ou da janela que o usuário utilizar!
Boa tarde, Vitor! Tudo bem?
Você pode fazer isso usando flexbox. Coloque todos os itens dentro da div .caixa e no css acrescente o display: flex:
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
display: flex;
}Agora ele vai ficar um do lado do outro. Mesmo assim, não vai ficar um espaçamento do mesmo tamanho para cada. Pra isso vamos ter que usar justify-content: space-between (os itens são distribuídos de forma igual ao longo da linha; o primeiro ítem junto à borda inicial da linha, o último junto à borda final da linha).
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}Ainda assim, não está pronto! Nossa nav dos três tópicos está com posição absoluta, não se adaptando ao espaço que deveria estar. Assim podemos apagar as definições de nav dentro do produtos.css que já vamos fazer tudo necessário com o flexbox.
Agora estamos quase lá, vamos usar a propriedade align-items pra todos ficarem alinhados ao centro. O resultado final dentro do produtos.css é:
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}Você pode ler mais sobre o flexbox no artigo Flexbox CSS: Guia Completo, Elementos e Exemplos.
Bons estudos!