How to layout such blocks on bootstrap4 adaptively?

Question

JavaScript

Good day. Can you please tell me how to set up such blocks correctly? Body width 100%, containers 1440px, lines 1170px. The map itself is larger, in the picture it is cut off only along the right edge of the container. It is necessary to show the map in full with the browser width, for example 1920px. I'm still new to this business and don't quite understand how to make it... Absolute positioning and media queries? I would be very grateful for the answers.
PS: the map is separately in png (there is also in svg), and the background is just a solid color.

Answer 1

array.reduce((acc, n, i) => ((acc[i / 2 | 0] = acc[i / 2 | 0] || []).push(n), acc), [])

or

[...Array(Math.ceil(array.length / 2))].map((n, i) => array.slice(i * 2, (i + 1) * 2))

Answer 2

Since there is svg, then use only it. For a map width of 100%, don't use constraint blocks, but instead a block with 100% width.
And my advice to you is to throw out the bootstrap. It is suitable only for prototyping or for admin panels without design. In all other projects that have a minimal design that needs to be followed, layout will turn into a struggle with bootstrap styles. At the very least, use only the grid and js part, if there are problems with writing scripts from
0