Oi Euclides, tudo bem?
Desculpe a demora em retornar.
Muito obrigada por compartilhar sua dúvida conosco. Entendo que você esteja enfrentando um problema ao exibir o caractere hífen em sua página, e fico feliz em ajudar a esclarecer o motivo desse comportamento.
Primeiramente, é importante entender que o caractere hífen é um caractere especial em HTML, que pode ser usado para indicar que uma palavra foi dividida em duas linhas. Por padrão, o navegador interpreta o hífen como um separador de palavras, e não como um caractere normal.
Dessa forma, ao utilizar o hífen em seu código HTML, é possível que ele seja interpretado de forma diferente do que você esperava. No seu exemplo de código, é possível que o hífen esteja sendo interpretado como um separador de palavras, o que resulta na quebra de linha que você mencionou.
Para evitar esse comportamento, você pode utilizar a entidade HTML "–" (sem as aspas) para representar o caractere hífen em seu código. Dessa forma, o navegador irá interpretá-lo como um caractere normal, e não como um separador de palavras.
Para aplicar a entidade "–" em seu código, basta substituir o hífen pelo seguinte trecho:
–
Assim, o seu código ficaria da seguinte forma:
<h3 className={stylesTema.titulo}> Nossa casa </h3>
<div className={styles.nossaCasa}>
<img src={nossaCasa} alt="Casa da massa" />
<div className={styles.nossaCasa__endereco}>
Rua Sobe e Desce, 100 <br /> <br /> Centro – SP
</div>
</div>
Com essa alteração, o caractere hífen será exibido corretamente em sua página, sem que haja a quebra de linha indesejada.
Espero que essa explicação tenha sido útil para você.
Um abraço e bons estudos.
Notei que este comportamento aconteceu no projeto mostrado na videoaula também. Apesar de ser um problema menor, fiquei curioso para saber o porquê isso ocorre. 
