How to make 3 columns on Flex?

Question

css

There is a container, it has 9 blocks with icons and text, you need to have 3 columns with 3 elements in each column, all this turned out to be done BUT
when I set the indents for text and icons, instead of 3 columns I get 4 with 2 elements in each, which to do and what is wrong?

<div class="section-5">
      <div class="idea">
        <div class="text-block-5">
          <h1>Идейные<br> соображения</h1>
          <p>Решения, которые принимала наша команда, основаны на потребностях и желаниях конечного пользователя. Благодаря им мы создали уникальную систему позволяющею эффективно управлять вашим бизнесом.</p>
        </div>
        <div class="ideing prototype">
          <img src="img/block-1.png" alt="">
          <h4>Глубокая проработка</h4>
          <p>Мы тщательно продумали UX и UI</p>
        </div>
        <div class="ideing cpu">
          <img src="img/block-2.png" alt="">
          <h4>Глубокая проработка</h4>
          <p>Мы тщательно продумали UX и UI</p>
        </div>
        <div class="ideing command">
          <img src="img/block-3.png" alt="">
          <h4>Глубокая проработка</h4>
          <p>Мы тщательно продумали UX и UI</p>
        </div>
        <div class="ideing design">
          <img src="img/block-4.png" alt="">
          <h4>Глубокая проработка</h4>
          <p>Мы тщательно продумали UX и UI</p>
        </div>
        <div class="ideing shield">
          <img src="img/block-5.png" alt="">
          <h4>Глубокая проработка</h4>
          <p>Мы тщательно продумали UX и UI</p>
        </div>
        <div class="ideing conversation">
          <img src="img/block-6.png" alt="">
          <h4>Глубокая проработка</h4>
          <p>Мы тщательно продумали UX и UI</p>
        </div>
        <div class="ideing pallete">
          <img src="img/block-7.png" alt="">
          <h4>Глубокая проработка</h4>
          <p>Мы тщательно продумали UX и UI</p>
        </div>
        <div class="ideing code">
          <img src="img/block-8.png" alt="">
          <h4>Глубокая проработка</h4>
          <p>Мы тщательно продумали UX и UI</p>
        </div>
        <div class="ideing traning">
          <img src="img/block-9.png" alt="">
          <h4>Глубокая проработка</h4>
          <p>Мы тщательно продумали UX и UI</p>
        </div>				
      </div>			
    </div>

.section-5
  width: 1920px
  height: 1000px
  background: #f9fafc

.text-block-5
  padding-left: 370px

.text-block-5 h1
  font-size: 40px
  font-weight: normal

.text-block-5 p
  font-size: 18px
  color: #333333
  opacity: 0.7
  width: 280px
  padding-top: 22px

.idea 
  display: flex 
  flex-direction: column
  flex-wrap: wrap 

  padding-top: 180px
  width: 800px
  height: 400px

How it should be according to the layout:

How it turned out for me:
What happens when I set the indents:

Answer 1

.ideing{
Margin: 15px;
Width:calc(33.3333333% - 30px);
}

And also center everything in ideing straight infuriates

.ideing{
Margin: 15px;
Width:calc(33.3333333% - 30px);
Display: flex;
Flex-direction: column;
Align-items: center;
}