Frustrated with Flexbox and selectors help pls

this is the Pen i’m working on :https://codepen.io/Abdou_dz_23/pen/ROgWQK?editors=1100
it’s a simple survey form , i used flexbox here.

this is the format i have in mind :

<div id="survey-form">

<div id="...-section">
            <div id="left-side"> </div>
            <div id="right-side"> </div>
</div>

<div id="...-section">
            <div id="left-side"> </div>
            <div id="right-side"> </div>
</div>

<div id="...-section">
            <div id="left-side"> </div>
            <div id="right-side"> </div>
</div>

</div>

What i want to achive here : Give the div’s with id “…-section” a blue border .(it looks ugly but helps me see the layout clearly , i’ll remove it after )
What is happening instead : Divs with the id’s : left-side , right-side and “…-section” are all given a blue border and i’m using this to select them :#survey-form > div

I suggest you give your sections same class names instead of ids and simply target that class in CSS.

That’s how you would target multiple elements.