Qual coloco o tamanho da tela no mínimo, a foto e as descrições ficam alinhadas, mas quando vou aumentando o tamanho, até antes de 768px, fica desalinhado. Pq isso acontece? pq colocando um text-align center não funciona?
exemplo:
quando vou abrindo a página até antes de 768px: 
isso acontece por que o text-align: center; alinha apenas o texto e não a imagem.
para alinhar a imagem você deve usar os atributos display: flex; para a imagem ficar flexivel e justify-content : center; para alinhar a imagem ao meio da parte superior da sua tela, se por acaso queira alinha ela ao centro então você também deve atribuir o align-items: center;
você pode aplicar esses atributos em na div pai da imagem ou do projeto
.container{ display: flex; justify-content: center; align-items: center; }