Flexbox inside Flexbox (Slider)

I want to create a horizontal Slider with Sections.

<div class="slider">
  <div class="section">
    <div class="card">Section 1 Card 1</div>
    ...
  </div>
  <div class="section">
    <div class="card">Section 2 Card 1</div>
    ...
  </div>
  ...
</div>

My idea: slider is a container with the section and i will transform the content on the x axis everytime I navigate through it. My Problem: I tried with flexbox, but the sections and cards are overlapping and I don't know why.

Maybe you can help me?

Codepen: https://codepen.io/thor-ben/pen/XWJgeEo