sou completamente iniciante em HTML, e estou tentando usar uma imagem no alto do site como uma espécie de cabeçalho (quero que ela ocupe toda a extensão da tela).
Segue meu código:
#topo {
width: 100%;
}
#foto-principal {
width: 100%;
height: 500px;
margin-left: 0px;
}
<figure id="topo">
<img id="foto-principal" src="https://picsum.photos/600/500" />
</figure>
<figure style="text-align: center; margin-top: 100px; padding: 60px">
<img src="https://picsum.photos/250/250" width="250px" height="250px" align="left" />
<img src="https://picsum.photos/250/250" width="250px" height="250px" align="center" />
<img src="https://picsum.photos/250/250" width="250px" height="250px" align="right" />
</figure>
A tag figure
funciona como um contêiner, certo? Eu mando ele ocupar 100% da tela e a imagem ocupar 100% do contêiner, faz sentido? A imagem parece ter uma margem maior a esquerda, e eu ainda preciso rolar a barra inferior pra direita para ver toda a figura, ou seja, ela não está idealmente alinhada a tela. Como proceder? (Segue uma imagem também).
Mais abaixo eu tenho uma sequência de 3 fotos e esta foi a maneira básica que encontrei de organiza-las em sequência, mudando o padding
do contêiner para elas ficarem um pouco mais próximas. Existe uma forma mais eficiente?
Segue imagem (cabeçalho e sequência de figuras):