Of course I have questions, there are some entries that I see first of all, I still do not understand the creation of points, how did you get them, I copied your code, I do not have them, now the question is how to make the element visible in the picture?
at the moment I can’t make the circle visible on the img_video photo, and I also can’t lower the dots on the left, which
I’m not sure what you are trying to do exactly but it looks like you are trying to put a blue background and dotted border behind a rounded image. For that to happen the image would need to be a transparent png or you won’t see the blue background.
You would be better off making that in your paint package and adding it to the image by default. Then you can export it a tenth of the file size of a transparent png. If you don’t want to do that then please post the image you are using to see if it’s possible.
You can’t do it with the approach you are currently taking as already mentioned as you are using disparate unconnected elements positioned by magic numbers. I don’t know how many times I can say it but this approach is not viable. Indeed you seem to have done the opposite of what I suggest. 
It won’t work in a responsive layout. You have to get the structure right as in the example I gave.
They are created as a linear gradient and used as a background to the element. No extra elements are required and can be reused as required. My demo clearly shows their use and should be easy for you to deconstruct as a learning exercise.
I’ll say it once more. If you are using large numbers to position things where you want them then that is the wrong approach in 99% of cases.
I understand what is wrong, but I do not understand how to do it right)
Another question is why if the content has a size of 1000px, and I add content to it, it goes beyond this content, why does this happen?
That’s a good start. It’ll take a bit of practice to get it right and really is a matter of trial and error and learning. Just keep working at it.
Generally content will not go outside its container unless the content itself is wider than the container.
If for example you have a container of 1000px but your image is 1100px then the image will not fit and 100px will stick out of the container. To stop this happening you would make the image fluid and rather than saying width:1100px you could say width:100% or indeed width:1100px combined with max-width:100% (and height:auto to maintain aspect ratio). That will mean the image would be 100px if there is room otherwise it will match the container’s width and shrink as required.
Another reason for content to go outside of a container would be if you positioned it outside the container or you used large margins that push it wider than the space available.
All of these boil down into the methodology I keep describing in that you must control the flow of the document and not force items to be where they don’t want to be. A logical structure and a good layout method will avoid most of these issues as the need to move stuff somewhere else does not happen because it is already where it should be.
I don’t expect you to understand all the nuances straight away but you have to imagine that a web page is not a piece of paper. It does not have a width and its height is unlimited. You don’t put random html in a page and then try and place each piece where you want. You design the page with a good html structure that generally allows the elements to be close to where they should be. Obviously flex and grid allow stuff to be moved and still maintain the flow of the document.
For example your image of the picture of the girl is right down at the bottom of the html but you want it to appear at the top. In my demo I moved it to the top of the html and it needed no positioning or magic numbers. It will not be affected by the height of the content or whether you change all the text unlike your magic margin method.
I’ll be back later with a few more suggestion after seeing the image you posted.
The question is why doesn’t margin: automatically center the element?
It will automatically center the element depending on the type of element and the display: properties the element possess.
If the element is display:block it will require a width or a max-width otherwise it is 100% wide and there is nothing to centre.
If it is an inline element (or display:inline or inline-block) it will not centre. Widths don’t apply to inline elements and inline blocks are centred via text-align:center on the parent.
If it is a display:table element it will center as they are shrink to fit and have intrinsic content width.
If it is a flex item (child of a flex box)or grid-item (child of a gtid box) then it will center.
If it is an absolutely placed item with a width and here its left and right are defined by co-ordinates larger than its width it will centre with margin:auto.
That’s a few of the scenarios explained.
I updated the codepen to show what you can do to the image but as I said you need to move it in the html to where it needs to be.
To get it exactly like your design would require transparent images as I already mentioned.
How does z-index work: ;?I need to hide an element, how do I do that?
When you say hide what do you mean exactly?
If you want it removed then display:none will do that.
If you are talking about stacking things on top of each other then that’s what z-index is used for. Only positioned elements can use z-index.
I have two elements, two pairs in the same container, in the position of the first pair: absolute; z-index: ; It worked
The second one doesn’t, I don’t understand.
If the second element has no positioned defined then you will need to add position:relative before the z-index will take effect
I have position: relative in my parent;
and the first pair works in this parent, the second pair does not work, I also tried to create another element with a parent and a child in this parent, but nothing works for the second pair.
Without seeing an example it’s hard to give advice.
As mentioned before only positioned elements can have a z-index. If the parent is positioned then that creates a positioning context for the positioned children. If the parent has a z-index other than auto then that confines the children’s z-index to the parents foreground.
There are rules that need to be followed so without a full overview I can’t give a straight answer:)
on the right, the dots are hidden under the element, but the dots on the bottom left are not,?
As I said above you need the a-index on the dots.
.block_inner_4_four > div{
position:relative;
z-index:-1;
}
You would also need a background color on the inner_p2 if you want the dots under the text rubbed out.
However as I said a number of times this is completely the wrong approach and not viable at all. I have given an example in my code pen of how this should be done without needing any stacking indexes or magic numbers.
I am on a mobile at the moment and your page is completely broken and unusable unlike my code pen which displays fine.
I urge you to rethink before it’s too late. .
It’s not entirely clear to me how to do adaptive layout, it seemed to me that I didn’t use magic numbers
You are getting better but you still need to distinguish between content and design. If images are not important to content then they should be background images. That would mean things like your dots should not be in the html mark up if at all possible.
Here’s another quick rejig of your code to place the dots and to make the layout fluid (I haven’t been too careful).
I’ve left as much of your stuff in there as possible so you can see it but in reality I would remove all the fixed pixel height for fonts and use rems instead. The dots are now in the background and stretch automatically with content and have no special html.
I made your images fluid and reduced the layout to a single column for smaller screens. I removed the quote images as they are just eye candy and used css quotes although you could replace with background images in a similar vein.
For the first time I see such a code))) I don’t really understand how it works for you, it’s very difficult for me, I tried to understand where the points come from but I didn’t understand, it’s very difficult to enter the code in css, I also understand how to create points, but I don’t understand how you created them in css. but I realized that in pixels it’s better not to ask anything,
It’s a radial linear gradient that creates the dots and sets a repeating pattern of 33px.
background-image: radial-gradient(
circle at 2px 2px,
#cde9fe 2px,
transparent 0
);
background-size: 33px 33px;
A gradient is basically like a background image and can be managed like a background image.
Here it is just on the body element.
Here it is as a background to a div.
Here it is as a partial background to a div but requires a pseudo element to limit its scope rather than covering all the div.
It’s very simple code although the actual construction of the gradient is quite complicated but luckily there are many examples around the web you can borrow from or modify to get what you want.