Help with HTML/CSS Tables

Now I just need everything centered to the middle of the page. I also have a 27" Monitor. So, all 8 of those items fit on my monitor. . Can I make it to where there's only a certain amount of items on one line? Let's say 5 per row?

By @jamedlock83

Sorry, in the previous comment I forgot to take this last request into account.
To do this, and as mentioned in the previous comment, everything happens at the level of the parent container, to which you need to assign a defined width, say 75%. Then, by playing with the margins, you can center this element.

All you need to do is add the following properties to the .flex-container rule;

.flex-container {
    /* all the others properties */
    width:75%;
    margin:0 auto;
}

You can get an idea by visiting this last link https://demo.puce-et-media.com/jamedlock83/jamedlock83-6.html.

As the example is based on your online site, which contains 4 elements per row, I leave it to you to modify the code to obtain 5 elements per row.

Hope that helps.

In fact the code proposed by stackoverflow works as expected and displays 4 items per row, not 6!

If you need, you can follow it from https://demo.puce-et-media.com/jamedlock83/stackoverflow.html

In terms of your approach, which doesn’t work https://demo.puce-et-media.com/jamedlock83/jamedlock83-1.html, at least that's not a 4 in a row as requested, so without going into too much detail about the overall code... there are a few points to consider

The first-level children of the container displaying flex must be informed of their behavior regarding the space available to them... and so the flex-grow property must be defined

flex-grow: 1;

https://demo.puce-et-media.com/jamedlock83/jamedlock83-2.html

That way, the children will extend to occupy the all width of the parent container, so it's important to define the parent container width to be sure to get the expected layout.

Next, you need to define the amount of space each children has available to itself, one use flex-basis for that purpose, in example, for 4 elements living together on 100%, this means using 25% each.

flex-basis:25%;

https://demo.puce-et-media.com/jamedlock83/jamedlock83-3.html

As you can see, this only displays 3 elements per line, not 4, that is because one have to take into account the fact that you give 5 px padding and 10 px margin to each element (left & right)... so one have to integrate them into the 25%.

flex-basis:calc(25% - (2 *5px) - (2*10px));

(I'm writing in a wordy way to help understanding the operative gymnastics involved)

https://demo.puce-et-media.com/jamedlock83/jamedlock83-4.html

Finaly, to prevent an incomplete row from occupying space in an anarchic way, you can add a limitation, for example max-width

max-width: calc(25% - (2 *5px) - (2*10px));

https://demo.puce-et-media.com/jamedlock83/jamedlock83-5.html

The flex property is also a short form of writing, integrating flex-grow, flex_shrink and flex-basis into a single property and can be used instead...

In any case, don't hesitate to visit  https://css-tricks.com/snippets/css/a-guide-to-flexbox

If I understand correctly, your wish is that by adding 2023, 2019 will switch to the next line and so on.

If that's the case, then the approach @BenPleysier proposes is perfectly suited to your needs. Don't use a table that isn't responsive on a smartphone and is too restrictive in terms of scalability.

Stack overflow propose a 4 in a row very simple to be adapted https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row

.parent {
  display: flex;
  flex-wrap: wrap;
}
.child {
  flex: 1 0 21%;
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

You'll find more info about flex on CSS Tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/

There are a couple of ways to achieve this and HTML/CSS tables are certainly not included.

You could use CSS Grid, Flexbox or an all in solution using Bootstrap