Minha página não fica igual à do exercício

(continuando)

/// site.css

body {
    font-family: "Crimson Text", serif;
    background-color: #F2FFFC;
    line-height: 1.5;
}

main {
    float: left;
    width: 85%;
}

main h1 {
    font-size: 300%;
    background-color: #851944;
    color: #fafffa;
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    padding: 1.25rem;
    margin: 0rem;
    border-bottom: 0.5rem black solid;
    text-transform: uppercase;
}

header h1 {
    font-size: 300%;
    background-color: #851944;
    color: #fafffa;
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    padding: 1.25rem;
    margin: 0rem;
    border-bottom: 0.5rem black solid;
    text-transform: uppercase;
}

main div {
    width: 50%;
    margin: 0 auto;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

b {
    font-weight: bold;
}

em {
    font-style: italic;
}

h2 {
    font-size: 1.5rem;
    font-family: "Open Sans Condensed", sans-serif;
    clear: both;
}

p {
    text-align: justify;
    margin: 1rem 0;
}

aside {
    font-family: "Open Sans Condensed", sans-serif;
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 1rem;
    text-align: center;
    text-transform: lowercase;
    width: 20%;
    clear: right;
    box-sizing: border-box;
    float: right;
    box-sizing: border-box;
    border-bottom: 10px solid black;
    border-left: 10px solid black;
    position: absolute;
    top: 310px;
    right: 0px;
}

.eu {
    float: right;
    box-sizing: border-box;
    border-bottom: 10px solid black;
    border-left: 10px solid black;
    position: absolute;
    right: 0px;
}

aside a {
    color: inherit;
    text-decoration: none;
}

aside h1 {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
}

.redes-sociais li {
    display: inline-block;
}

.redes-sociais a {
    width: 40px;
    height: 40px;
    display: inline-block;
    text-indent: -1000rem;
}

.github {
    background-image: url(../img/github.png);
}

.twitter {
    background-image: url(../img/twitter.png);
}

.linkedin {
    background-image: url(../img/linkedin.png);
}

footer {
    background-color: black;
    color: #F2FFFC;
    padding: 0.5rem;
    clear: both;
    position: fixed;
    bottom: 0;
    width: 100%;
}

main a {
    color: #851944;
}

Olá Filipe! Tudo bem?

Pelo que vi estão faltando duas classes no seu arquivo css, titulo-principal e foto-home, exatamente as que mexem com as partes que estão dando problema. Dá uma verificada e depois fala pra gente.

Abraços

Inseri o código abaixo no foto-home mas ainda não tive o resultado correto:

.foto-home {
    height: 200px;
    position: absolute;
    right: 50%;
    border-radius: 50%;
}

A foto não aparece exatamente no centro, já que o "right" considera o último pixel da foto, não o seu centro. Também não aparece acima do título, mas na frente dele. Não tenho ideia do valor correto pra colocar.

Também não faço a menor ideia dos valores para o titulo-principal. Minha dúvida maior é: no index.css não são passados parâmetros para o header h1, toda a formatação é herdada do main h1 do site.css. Dessa forma, como fazer com que um outro texto "entre no espaço" desse h1 (no caso, fique acima da linha preta)?

Coloque o código da classe .titulo-principal aqui para nós analisarmos, ainda está faltando ele.

Pelo que notei da sua prática de programação você nem usou essa classe na verdade.

Fiz a análise do seu código e percebi que você ainda está utilizando demais apenas os seletores de tags. Tente passar a utilizar mais as classes para que seu código fique mais fácil de entender e para que o seu layout seja mais future proof (a prova do futuro), ou seja, para que você não tenha muitos problemas com a manutenção do CSS por causa de novos itens no layout.

Em relação ao problema do seu código, foi uma questão de colocar as propriedades corretas num seletor errado, observe como o seu código está e como ele deveria ser:

Como está:

.

Como deveria estar:

O que houve foi uma incoerência lógica. Quem tem que ter o fundo roxo não é o h1 do header, mas sim o header.

Depois de concertar isso você vai perceber que o subtitulo está ficando do lado esquerdo do cabeçalho. E isso está acontecendo por causa da propriedade text-align: justify; que você colocou para todos os parágrafos de todas as páginas do seu site por meio do seletor de tag p no arquivo site.css.

Observe então que o seu código CSS já está dando problemas no layout por você estar usando demais os seletores de tags que são altamente genéricos. Esse é um caso onde o parágrafo não foi feito para ficar justificado.

O interessante é que lá no seu HTML as tags já estão com as classes, mas você preferiu continuar usando o seletor de tag.

Enfim, para fazer com que o subtítulo do cabeçalho se alinhe com o centro, você vai ter que criar o código da classe .subtitulo-principal no arquivo index.css:

.subtitulo-principal
{
    font-size: 0.35em;
    text-align: center;
}

-----------------------------------------------------------------------------

Depois de ver o código notei mais um detalhe. A estilização do cabeçalho está dentro do arquivo site.css e esse não é o lugar correto para ela estar. A única página que tem cabeçalho é a index.html, então o correto é você tirar os seletores "header" e "header h1" do arquivo site.css e colocá-los no arquivo index.css.

Muito obrigado, Axell. Reorganizei o código como você explicou e agora deu certo. Vários desses seletores genéricos estão no código porque assim foi passado nos exercícios, mas vou criar o hábito de colocar classe em tudo!

Entendi. No meu caso, eu sempre prestava atenção em como o professor criava as classes no meio do vídeo, aí o meu código já ia ficando ajustado desde a primeira atividade. E na maioria dos vídeos ele instrui a usar e usa as classes.

Mas cuidado ! Não é sempre que as classes são o melhor a ser usado.