Issue: nesting flexboxes next and on top of each other - css

Question

I currently have a problem with nesting a flex box layout. I have a parent flex container and four separate containers within it, so far the other 3 column containers work correctly. However when I try to place another container underneath the main one it simply moves to the right side.
.container-wrap {
display: flex;
justify-content: center;
}
.container-leftbar {
display: flex;
height: 100%;
gap: 10px;
padding: 10px;
flex: 1;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: fit-content;
}
.container-main {
display: flex;
height: 100%;
gap: 10px;
padding: 10px;
flex: 1;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: fit-content;
}
.container-main2 {
display: flex;
height: 100%;
gap: 10px;
padding: 10px;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.container-rightbar {
display: flex;
height: 100%;
gap: 10px;
padding: 10px;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: fit-content;
}
<!--flex wrap-->
<div class="container-wrap">
<!--left column-->
<div class="container-leftbar">
<div class="1a">123</div>
<div class="1b">123</div>
<div class="1c">123</div>
</div>
<!--1 middle body-->
<div class="container-main">
<div class="2a">123</div>
<div class="2b">123</div>
</div>
<!--2 middle body-->
<div class="container-main2">
<div class="3a">123</div>
<div class="3b">123</div>
</div>
<!--right column-->
<div class="container-rightbar">
<div class="3a">123</div>
<div class="3b">123</div>
<div class="3c">123</div>
</div>
</div>
I tried to manually place the the top and left margin of the main box however I only really was able to achieve the top margin placing. I'm still somewhat new to using flex so any sort of help is appreciated.