[SOLVED] Columns in another table with the same width

Columns in another table with the same width

Image to better explain the problem.

What I'm trying to do is make the columns in the second section the same as the first. So far, I've achieved this by adding 13% padding to the left and right sides of the section and setting the correct width in percentages for each column, although I've had problems with it because it was automatically setting the wrong percentages to fill 100% of the section.

The content is in "infobox".

If I don't set padding in section, it looks like this:

I know there has to be a better way to achieve the same result. Any ideas?

Solution

.container {
  display: flex;
  width: 80vw;
  margin: 0 auto;
  justify-content: space-between;
  border: solid 1px green;
  text-align: center;
}

.full {
  border: solid 1px red;
  width: 100%;
}

.half {
  border: solid 1px blue;
  width: 50%;
}

<div class='container'>
  <div class='full'>1</div>
  <div class='full'>2</div>
  <div class='full'>3</div>
  <div class='full'>4</div>
</div>

<div class='container'>
  <div class='half'></div>
  <div class='full'>1</div>
  <div class='full'>2</div>
  <div class='full'>3</div>
  <div class='half'></div>
</div>