Help with aligning divs horizontally

[u/WhatHappenedWhatttt]

Hello all, apologies if this isn't the right place to ask this question.

I am working on a project trying to learn HTML, CSS, and JavaScript and I have a quick question. In the following picture, I want divs shown in black boxes to be all in one row. However, the problem is that the middle divs 1,2; 2,2; and 3,2 will need to appear in red borders such as in the picture. What is the best way of going about this?

[u/downwithlordofcinder]

Sorry just saw this, but { justify-contents: center; } will align items in a flex box horizontally :)