Как сделать 3 колонки на Flex?

Question

[Александр Волков]

Есть контейнер, в нем 9 блоков с иконками и текстом, нужно что бы было 3 колонки по 3 элемента в каждой колонке, все это получилось сделать НО
когда задаю отступы для текста и иконок, вместо 3 колонок получается 4 по 2 элемента в каждой, что делать и в чем ошибка?

<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

Как должно быть по макету:


Как получилось у меня:

Что получается когда задаю отступы:

Comments

[Даниил Маслов]

скриншоты перезалейте, пожалуйста

[Александр Волков]

s0xzwasd, у меня все отображается

Answer 1

[Сергей Котов]

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

И ещё оцентруйте все в ideing прям бесит

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

Comments

[Сергей Котов]

. text-block-5 {
Width: 100%;
}

[Александр Волков]

Сергей Котов, Не работает ваш код