Roteiro de ensino precisa ser revisto.

Eu não tenho tanto problema em acompanhar a didática do professor (eu tenho um conhecimento legal de html e css para entender), mas precisa ser revisto o roteiro das aulas do React. No início da aula, nos mandou excluir uma série de arquivos (um deles o App.css), pois não íamos precisar delas para o aprendizado e chegando no capítulo 3 está no projeto do professor o App.css... Não me importo em criar o arquivo novamente e botar import e arrrumar tudo. Mas Pô, explica pelos menos a razão de eliminar aquele arquivo no início e depois refazer o arquivo em função do aprendizado, passou muito batido isso.

Para quem precisa:

App.css:

.conteudo {
    display: flex;
}

:root {
    --primaria: #58a4b0;
    --secundaria: #373f51;
    --secundaria-ativa: #cccccc;
    --fundo: #ffffff;
    --fundo-detalhes: #ececec;
}

estilo.css do componente Cardnota:

.card-nota {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    background-color: var(--fundo-detalhes);
    border-radius: 4px;
    flex-wrap: wrap;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    padding: 16px;
}

.card-nota_cabecalho {
    font-size: 1.1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-nota_texto {
    margin-top: 8px;
    font-size: 1em;
}

.card-nota_titulo {
    font-size: 1.2em;
    margin-right: 12px;
}

estilo.css do Componente ListaDeNotas:

.lista-notas {
  background-color: var(--fundo);
  flex-grow: 3;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  list-style-type: none;
  padding-left: 24px;
  padding-top: 24px;
}
.lista-notas_item {
  margin: 12px;
  max-width: 240px;
  max-height: 400px;
  display: inline;
}

estilo.css do componente FormularioCadastro:

.form-cadastro {
  flex-grow: 2;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 12px 40px;
}
.form-cadastro_input {
  margin-top: 8px;
  padding: 4px;
  border: none;
  background-color: var(--fundo-detalhes);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
}

.form-cadastro_submit {
  align-self: flex-end;
  width: 30%;
  background-color: var(--secundaria);
  color: white;
  font-weight: 400;
}

.form-cadastro_submit:active {
  background-color: var(--secundaria-ativa);
}

O index.css está estranho para o React.