<blockquote>
<p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
<cite>José Souza, Fiat</cite>
</blockquote>Se eu coloco o blockquote dessa forma, o cite fica fora do box feito para ele no css.
Outra dúvida, no main h1, o top não fica colado à barra do navegador, sempre sobra uma distância, mesmo se eu coloco margin: 0; quem sobe é o p e não o h1
Oi Manuela tudo bem?
Teria como colocar seu projeto no github, por gentileza, para analisarmos.
O caso do <blockquote> , eu não consegui reproduzi, colei o trecho descrito por você e ficou dentro do box nos três navegadores.(Edge, Chrome e FireFox), alguma coisa no CSS diferente do css padrão do projeto.
Geralmente quando o filho não respeita o espaço do container pai eu resolvo com clear="both" dentro de br, mas pode ser usado um elemento de bloco sem nada.
ex:
<br class="clear-fix" />
<span style="display: block;clear:both;"></span>
<div style="clear:both;"></div>
Esse problema , eu tive apenas no <footer> quando quis fazer uma seta feita com bordas flutuando a direita do meu rodapé.
Analisando esse erro percebi que ao colocar o float:right eu tiro a seta do fluxo e o meu pai passa a ter o tamanho do elemento seguinte , no meu caso a descrição @copyright.
Como meu copyright é apenas uma fonte de 14px , essa é altura que meu footer ficou, para resolver usei clear both.
O caso do main, talvez você não tenha retirado os valores default de margin, padding e border do navegador.
No projeto usamos um arquivo reset.css.(Ele retira qualquer valor default de margin, padding e border).
Se quiser, pode apenas retirar do Body para fins de teste, com código abaixo:
body {
margin: 0px;
padding:0px;
border:0px;
}