Solucionado
Uma dica pra quem não sabe o porque do código não funcionar com o CSS da forma que você quer, a ordem dos links importa, coloque o link do styles.css por último para a sua modificação sobrepor a modificação do bootstrap, o que eu quebrei a cabeça pra descobrir isso não é brincadeira.
hoje, com a Alura e o Google Gemini
Oii, Henrique. Tudo bem?
Verdade. No HTML, a ordem de importação dos arquivos CSS realmente faz diferença. Quando você coloca o styles.css depois do Bootstrap, o navegador aplica suas modificações por último, o que permite que elas sobrescrevam os estilos padrão do Bootstrap, já que as regras mais recentes prevalecem. Isso segue o conceito de "cascade" no CSS.
Um exemplo prático:
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="styles.css">
Com isso, suas regras personalizadas no styles.css irão ter prioridade sobre o que foi definido no bootstrap.css.
Continue explorando e experimentando! Qualquer dúvida, o fórum está à disposição.
Abraço!