Olá,
Na hora de deixar o site responsivo, as divs mais externas, que estavam com width fixo em 940px, foram estilizadas com o width: auto. Até aí eu entendi que assim eles se ajustam aos respectivos "containers" pais.
Acontece que, para os elementos .lista-beneficios e .imagem-beneficios, o width foi utilizado como 100%. Fiz um teste mudando para auto, porém o resultado foi indesejado, a imagem ficou toda esticada, bugando a página.
Fiquei curioso quanto a esse comportamento. Sei que provavelmente tem a ver com o fato desses dois elementos estarem com display inline-block, e um colado ao outro no html. Mas gostaria, se possível, de uma explicação melhor do por quê usarmos width: auto não deixarão os dois elementos ajustados e um logo abaixo do outro.
Queria saber também se é realmente boa prática ter colocado esses dois elementos como inline-block e grudados no html (ou se foi só mesmo pra fins didáticos de apresentar o inline-block). Fico pensando se uma div pra cada não seria melhor.
Obrigado.
