O max-width em CSS define a largura máxima que um elemento pode ter. Isso significa que o elemento pode diminuir de tamanho conforme o necessário, mas nunca ultrapassará o valor definido em max-width.
Em outras palavras, basicamente o max-width serve para que ao especificarmos a largura máxima dos elementos nossa pagina web nao fique com barra de rolagem em dispositivos moveis, que seria um ponto extremamente negativo para nosso site.