Vertically Aligning and Positioning Parent DIVs in CSS - css

Question

I'm fairly new to coding. I was making a JS project when I encountered a problem. I need to vertically align 2 parent divs. Those 2 parent divs have several divs underneath them. So, in order to vertically align the whole page, I need to style those parent divs. Please help me in doing so. If you know the solution to my problem, please teach me how to move my divs along the way.
Here's the CSS Code. (If you want to see the JS and HTML code, here's the js fiddle link: https://jsfiddle.net/y924rv7g/)
body {
background-image: url(Background.jpeg)
}
/* AGE IN DAYS */
.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;
}

Answer 1

When posting a question to Stack Overflow, please try to keep the sample code as minimal as possible, so we can concentrate only on the necessary parts :) Not sure what exactly are you trying to do - what and how do you expect to have aligned? For one dimensional styling have a look at flexbox, for 2D grid. I'd recommend you to go through one of those links (probably flexbox in your case) and read them thoroughly, your answer is most likely there :)