How to implement this on a div?

Question

HTML

Good afternoon. Please help me implement all this on divs. I don’t understand anything in the markup ... I need the site to be "rubber". If you set width:100% for the header, the header is stretched only to the visible area, and it turns out that if you scroll horizontally, there will be no header.
I need a header in which there is a block of 1200px in the middle (constant!), And if there is space on the left and right, then it is empty, if not, the block does not get smaller, the left container is lower than the constant 800px, the right one is 350px, all other indents to be rubber, please help...
PS But in Paint - I am God! :-)

Answer 1

This problem is solved through the media

@media (min-width: 900px){
  .top-element { width: 1200px }
}

@media (min-width: 700px) {
  .top-element { 
    width:  650px;
    margin: 1px 1px 1px 1px;
  }
}

Above is an example
And in this manner you prescribe this layout
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp - a link to w3c if you have any questions