Solucionado
Eu coloco este código em dois divs, do jeito que foi ensinado no curso:
width: 50%;
min-width: 250px;
display: inline-block;
vertical-align: top;Mas os divs continuam um abaixo do outro, a não ser quando eu diminuo um deles pra 49%, aí eles encaixam. Não tem problema fazer isso por enquanto mas eu queria saber porque isso acontece.
hoje, com a Alura e o Google Gemini
(Possivelmente não funcionará)
Faça o teste adicionando a propriedade box-sizing: border-box;, dessa forma, você terá a certeza de que a largura das divs realmente será 50%.
Uma forma de conseguir colocar as divs lado a lado é fazer a última flutuar a direita também, você pode usar float: right; na de baixo.
Problema do encaixe:
Você não consegue encaixar as duas divs com width: 50%; porque se você perceber sempre há um espaço vazio que separa os elementos do tipo inline-block. É como se tivesse uma "margem" entre eles, e com essa "margem" as duas divs juntas passam de 100%. É algo próximo de 4px de espaçamento. Observe o espaço entre as divs com 50% de width:
.
Para remover esse espaço você pode colocar o seguinte código nas divs:
font-size: 0;Porém nem sempre você poderá se dar ao luxo de colocar um font-size: 0; na div porque as vezes você precisará colocar texto nela. Um outra forma de solucionar muito estranha é escrever o código das divs coladinho no HTML:
<div>abc</div><div>def</div>Ou então colocar um comentário entre as divs:
<div>abc</div><!--
--><div>def</div>Resultado:
.
Você pode encontrar aqui outras formas de solucionar.
A melhor delas é definir um font-size: 0; numa div pai e depois, nas duas divs filhas, colocar o font-size desejado.
Botar as divs uma do lado da outra funcionou. Com float também. Obrigado.