Estou criando um projeto com html e css para fixar os conhecimentos das aulas e aprender coisas novas. Estou com um problema. A imagem que estou usando de fundo no main está ficando sob o header, mas eu gostaria que ela começasse após o término do header(menu do site).
Vou colocar um trecho do código, acredito que já seja o suficiente para descobrir o que estou fazendo de errado.
Obs: Deve ter outros erros além disso, mas como falei, ainda estou aprendendo. Caso haja sugestões de melhoria, fiquem à vontade para apontá-las.
Obrigado.
<body>
<header>
<div class="caixa">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="fii.html">Fundos Imobiliários</a></li>
<li><a href="carteira.html">Carteira de Ações</a></li>
<li><a href="fia.html">Fundos de Ações</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="principal-carteira">
<div class="fundo-carteira">
<h1><img src="fundo-tng.png" width=100%></h1>
</div>
[continua]
CSS:
.caixa {
position: relative;
width: 100%;
margin: 0 auto;
}
header {
background: rgb(76, 128, 197);
padding: 20px 0;
font-family: 'Open Sans', sans-serif;
position: fixed;
text-align: center;
width: 100%;
z-index: 1;
}
