Utilizando o css abaixo as caixas que representam os trabalhos realizados ficam uma sobre a outra. Não entendi o porque. A lógica que utilizei é a seguinte: - Tenho a div de conteúdo com 720px de largura e dentro dela inseri o conteúdo com o portfolio - Ao aplicar o box-sizing: border-box o elemento se adequa para que seu conteúdo, espaçamento interno e borda ocupem a minha largura definida. - Tendo feito isso preciso considerar o espaçamento externo, no caso, margin - Como apliquei margem horizontalmente apenas do lado direito, minha lógica para aplicar largura as minhas 'caixas' seria (sendo n a largura da caixa): n + 16 + n + 16 = 720 para uma linha de caixas - Isso resulta numa largura de 344px para minhas caixas
Há algo que não estou considerando?
.trabalho-realizado {
border: 8px #000 solid;
background-color: #FAFFFC;
padding: 16px;
margin: 0 16px 16px 0;
width: 344px;
display: inline-block;
box-sizing: border-box;
}
