less - CSS Grid troubles -

Here is the code example:

You will gradually change the screen size by dragging the size scale into the test window You will see that the number columns are scattered.

What can I do to fix this trouble?

Update: This is for the fluid CSS grid system to create layouts for webapps. I do not want to get the table. And the example this grid is for resizing and testing on other dimensions.

I think the problem is in the browser, which calculates 55 + 43px from .cx1 and it makes goals on pixels, and CX5 does not count 449 + 43px. Cx1 is a goal of 55 px.

Specifically for Dexter Hoinda:
Not 100% width? And 12 columns 3.8% margin right (excluding the last).

  then Cx1 = (1 * (100 + 3.8)) / 12-3.8 = 4.85% Cx2 = 4.85 * 2 for 3.8 = CX3 = 4,85 * 3 + 3, 8 * 2 = 22.55% and so on for 13.5%. The main formula (a * (100 + B)) / 12-B (where one = the number of columns spread and B is ripped) to calculate any column width from 1 to 12   < P> Any questions for math?  
 And the question is:  width (4.85% + 3.8% + 4.85% + 3.8% + 4.85%) & lt; & Gt; Width (22.15%)   
 So if you need anything please explain to find fault in any .cx width. you can do it?  
  
 
 
 Either you should use the div with a fixed width that you can provide in your CSS file Or you can do this through the table, in fact your devices have not been tightened together properly. This is the main reason.