How to make, that at reduction of the size of the screen, indents to the right and left gradually became less, as on this site:

enter image description here

Link

  • using media queries, for example - humster_spb
  • There is a simple margin: auto - vp_arth

1 answer 1

This is done using the usual margin :

 .main { width: 200px; height: 100vh; background-color: black; margin: 0 auto; /* Это наша строка. Она делает одинаковые отступы слева и справа */ } 
 <div class="main"></div>

  • I know that. But I ask --- how can I make these indents decrease when the screen size decreases, if I set the width of the block as a percentage? That is, when the screen is reduced, the block should increase. - Vladimir
  • @Vladimir, what does it mean when reducing the screen? - Yuri
  • For example: on the phone block in full screen, and on the computer only half. Well, I already figured out, thanks !! Need min put the width of the window for example: 1000px and the width of the block 1000px, and the indents --- as you said. - Vladimir