width, height e uma armadilha clássica

• width — a largura · height — a altura
• width: 100% faz a caixa ocupar toda a largura disponível

.foto { width: 300px; height: 200px; }

A pegadinha que pega TODO iniciante: por padrão, quando você adiciona padding ou border, eles são somados à largura. Ou seja, width: 300px + padding: 20px vira 340px na tela — e o layout "estoura".

A solução (use sempre):

* {
  box-sizing: border-box;
}

Com border-box, o width passa a incluir o padding e a borda — 300px é 300px, ponto final. O * significa "todo elemento".

💡 Praticamente todo projeto do mundo começa com essa linha. É a "regra de higiene" nº 1 do CSS.