Columns with a fixed gutter (pixels)

We want columns to make classes for columns with a fixed gutter width in pixels. There should be no spacing left of the first column en no spacing right of the last column.
We have made some classes for the columns like this:

.col1-3 {
width: calc((100% - 28px * 2) / 3);
margin-right: 28px;
float: left;
}
.col1-3last {
width: calc((100% - 20px * 2) / 3);
margin-right: 0;
float: right;
}

.col1-4 {
width: calc((100% - 28px * 3) / 4);
margin-right: 28px;
float: left;
}
.col1-4last {
width: calc((100% - 20px * 3) / 4);
margin-right: 0;
float: right;
}

The problem is that the classes are not recognized by the beaver builder. The width of the columns is defined by the percentage in the beaver builder, not by the class. Is there a way to solve this?

An example you can find here:

Thank you so much!

I would use CSS Flexbox on the column group and CSS column-gap, much more flexible.