Cómo alinear divisiones secundarias una al lado de la otra dentro de divisiones principales no anidadas

Tienes dos divisiones una al lado de la otra, cada una dentro su propia división principal. Estos divs principales se repiten varias veces. Desea colocar cada par de child_div_1 y child_div_2 horizontalmente uno al lado del otro.

Para lograr esto, use display:inline-block; propiedad de estilo en los divs secundarios. Esta propiedad permite que los divs se alineen como elementos en línea sin interrumpir el flujo normal de contenido. Si bien los divs se mostrarán uno al lado del otro, conservarán su estado como elementos de bloque.

Este método proporciona una forma más sencilla de lograr el diseño deseado en comparación con el uso de elementos flotantes. Aquí hay un ejemplo de HTML y CSS modificados:

.child_div_1, .child_div_2 {
  display:inline-block;
}

Para obtener más orientación, puede consultar el siguiente tutorial: http://learnlayout.com/inline-block.html