Alineación vertical y posicionamiento de los DIV padres en CSS

Soy bastante nuevo en programación. Estaba haciendo un proyecto en JS cuando me encontré con un problema. Necesito alinear verticalmente 2 divisiones principales. Esas 2 divisiones principales tienen varias divisiones debajo de ellas. Por lo tanto, para alinear verticalmente toda la página, necesito estilizar esas divisiones principales. Por favor, ayúdame a hacerlo. Si conoces la solución a mi problema, por favor enséñame cómo mover mis divisiones en el camino.

Aquí está el código CSS. (Si quieres ver el código JS y HTML, aquí está el enlace JS Fiddle: https://jsfiddle.net/y924rv7g/)

body {
background-image: url(Background.jpeg)
}

/* EDAD EN DÍAS */
.container-1, .container-2 {
border: 1px solid;
margin: 0 auto;
text-align: center;
width: 75%;
}

.flex-box-container-1, .flex-box-container-2 {
display: flex;
padding: 10px;
border: 1px solid black;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}

.flex-box-container-1 div {
padding: 10px;
align-items: center;
display: flex;
}

#flex-box-result {
font-size: 32px;
font-weight: bold;
}

#yikes {
font-size: 32px;
font-weight: bold;
Animation-name: example;
Animation-duration: 0.5s;
animation-iteration-count: infinite;;
}

@keyframes example {
10% {color: red;}
15% {color: yellow;}
20% {color: blue;}
30% {color: green;}
40% {color: lightsalmon;}
50% {color: lightsteelblue}
60% {color: steelblue}
70% {color: ivory}
80% {color: purple}
90% {color: pink}
100% {color: magenta;}
}

.flex-box-container-2 img {
box-shadow: -12px 11px 28px 6px rgba(0,0,0,0.69);
margin: 10px;
}