How to make a rubber site correctly (max-width doesn't work)?

Question

css

Please help me to make a rubber site correctly. I'm having problems with the width and height of the blocks. When I prescribe max-width to a specific block, for some reason this property does not work. Max-width only works if I assign it to body in general. I would like to make a website that will stretch at different screen resolutions.
The code can be viewed on codepen .
Faced the following questions:
1) How to set the max-width width correctly: for the body as a whole or for each block separately ?
2) How to make the block height correctly? Fix in px or make in %. I set height: 100%, but the blocks are too low... How can I make each block one screen tall?
3) How to do the correct distance between the blocks? I do it through margin-top or bottom in pixels. For example, margin-bottom: 200px. Is this correct at all? Is it worth fixing the padding in pixels? If not, what would be the right way?
4) And another moment on indents in the second block. The second block is made by a frame with indents on the sides. How to make it so that when the screen is reduced, the indents remain? At 1000px it looks right, but I start to decrease and the indents disappear. Now the block is made with width: 100%; and set max-width to body.
Help plz. I would like to figure out how to correctly make the width and height of the blocks so that they stretch. I tried different options, but did not find the right solution :(

Answer 1

1. Works. Usually, if you want to specify max-width for the entire site, the code wraps in a div with the container class and adds max-width to it.
codepen
2. Use vh, vw, vmin, vmax
3 and 4. https://medium.com/@js_tut/flexbox-the-animated-tu...

Answer 2

1. Hello, regarding question 1, you can ask both the body and a separate element, depending on the goal, if you want the site to stop decreasing when a specific size is reached, write for the body, if such an action is required for a separate element, then ask for it.
2. This is a rubber design and it requires you to set everything as a percentage, set height: 100% for the container in which the element is located, if this is a container containing more containers, then setting height: 100% for it, it will be so for the whole screen, as its parent is body.
3. Set indents as a percentage or in other relative units, the layout is rubber.
4. Set for flex containers:

flex-wrap:wrap;
flex-direction:row;
judtify-content:space-between;

>
It seems that everything, by the way, would be nice if you read about such units as: vh, vw, vmin, vmax