Solucionado
Onde vejo o valor total do container e como faço para calcular isso:
Para que elas apareçam duas por linha, precisamos garantir que cada uma tenha um pouco menos da metade da largura total do container. Podemos usar a medida de porcentagem para isso:
.portfolio li {
display: inline-block;
width: 45%;
}Obrigado.
Não entendi muito bem sua dúvida, Felix! Você quer saber a largura total do conteúdo geral? Apertando F12, além de ter acesso a um monte de informações, podemox ver o box-model da página, que nos indica a largura e altura do conteúdo da página.
Mas como você mesmo disso, podemos usar a porcentagem para não precisarmos saber exatamente o tamanho real em pixels da página, Felix!
Felix, quando vou fazer esse tipo de design sempre costumo usar "calc", por exemplo:
Tenho um container com 100% de width para englobar toda minha página, caso eu queria criar duas divs para ficar dentro de container lado a lado eu poderia simplesmente usar width 50%;
Veja esse exemplo:
https://jsfiddle.net/mahenrique94/84h5qf5o/
Mas caso você queria adicionar algum espaçamento entre elas ai não vai dar certo, tente adicionar um margin: 1rem para as divs filhos e veja o que acontece.
O código quebra todo, certo ? mas como resolver isso ? Basta apenas usar a propriedade calc, veja abaixo:
https://jsfiddle.net/mahenrique94/c96xes64/
Fizemos o calc com 2rem pois no margin temos 1rem para a esquerda e 1rem para a direta totalizando 2rem.
Obs: Só um detalhe eu prefiro usar float:left invéz de display: inline-block;