Как сделать так, чтобы ширина сайта изменялась по примеру vk.com

body {                                /*Чтобы не было отступов с краю*/ 
margin:0px; 
--size: 1903px; 
} 
.borders {                            /*границы сайта для удобства верстки*/ 
display: block; 
width: 100%; 
height: 1px; 
transform: rotate(-90deg); 
position: relative; 
} 
.border1 {                            /*левая граница*/ 
position: absolute; 
left: 463px; 
} 
.border2 {                            /*правая граница*/ 
position: absolute; 
right: 497px; 
} 
                                  /*Основная часть */ 
.header { 
position: relative;                   /*у главного relative у многих его     дочерних - absolute, для удобства*/ 
display: block; 
width: var(--size); 
height: 50px; 
background: #FF8080; 
-webkit-user-select: none;            /*Нельзя выделять текст в голове (for     Chrome)*/ 
-moz-user-select: none;               /* for Mozilla Firefox */ 
-ms-user-select: none;                /* Internet Explorer (не поддерживается) */ 
-o-user-select: none;                 /* Opera Presto (не поддерживается) */ 
} 
.logo { 
width: calc(var(--size) * 5);         /*Оптимизация размера*/ 
display: block; 
width: 53px; 
height: 20px; 
position: relative; 
left: 24.4%; 
top: 0px; 
font-size: 30px; 
font-family: Times New Roman; 
} 
.header_text_inside { 
position: relative; 
width: calc(var(--size) * 5);         /*Оптимизация размера*/ 
color: black; 
text-decoration-line: none; 
font-size: 30px; 
font-family: Times New Roman; 
font-size: 22px;  
margin-left: 40px;                        
} 
.header_text { 
display: block; 
width: 550px; 
height: 30px; 
position: absolute; 
left: 36%; 
top: 20px; 
letter-spacing:0.5px; 
} 
.enter_button { 
display: block; 
width: 135px; 
height: 25px; 
background:#C2484C; 
position: absolute; 
left:67%;  
top:6px; 
border-radius: 6px; 
text-align: center; 
line-height:24px; 
} 
.enter { 
display: block; 
width: 150px; 
height: 50px; 
} 
.reg { 
width: 110px; 
height: 25px; 
position: absolute; 
left:67%;  
top:30px; 
color: black; 
text-decoration-line: none; 
} 
.enter_text { 
color: black; 
text-decoration-line: none; 
} 
.main_image { 
max-width: 100%; 
height: auto; 
-webkit-user-select: none; 
-moz-user-select: none; 
user-select: none; 
pointer-events: none; 
} 
.topics { 
position: absolute; 
left:37%; 
top:15%; 
font-size: 40px; 
font-family: Arial, Times New Roman ; 
-webkit-user-select: none;            /*Нельзя выделять текст  (for Chrome)*/ 
-moz-user-select: none;               /* for Mozilla Firefox */ 
-ms-user-select: none;                /* Internet Explorer (не поддерживается) */ 
-o-user-select: none;                 /* Opera Presto (не поддерживается) */ 
color: #191919; 
} 
.num_topics { 
position: absolute; 
left:37.2%; 
top:21%; 
font-size: 40px; 
font-family: Arial, Times New Roman ; 
-webkit-user-select: none;            /*Нельзя выделять текст  (for Chrome)*/ 
-moz-user-select: none;               /* for Mozilla Firefox */ 
-ms-user-select: none;                /* Internet Explorer (не поддерживается) */ 
-o-user-select: none;                 /* Opera Presto (не поддерживается) */ 
color: #191919; 
}

<div> <!-- границы --> 
	<div class="border1 borders"> 
		<hr style="margin: 0px; display: block; height: 1px; width:1903px;"> 
	</div> 
	 
	<div class="border2 borders"> 
		<hr style="margin: 0px; display: block; height: 1px; width:1903px;"> 
	</div> 
</div> 
<div class="header">                     <!-- голова --> 
	<div class="logo">                   <!-- лого --> 
    	<h2> 
    		<a href="#" style="color: black; text-decoration-line: none;">SE</a> 
    	</h2> 
    </div> 
    <div class="header_text">            <!-- Разделы --> 
    	<a class="header_text_inside prices" href="">Цены</a> 
    	<a class="header_text_inside feedback" href="">Связаться с нами</a> 
    	<a class="header_text_inside about_us" href="">О школе</a> 
    </div> 
    <div class="enter">                                 <!-- Вход --> 
		<a href="#" class="enter_text"> 
			<div class="enter_button">Войти</div>       <!-- Кнопка входа --> 
		</a> 
		<a class="reg" href="#">Зарегестрироваться</a>  <!-- Зарегестрироваться -->   
	</div> 
</div> 
<div class="main">                        <!-- Первая видимая часть страницы -->                      
	<img class="main_image" src="/img/main_image.png"> 
	<strong><p class="topics">Тем</p></strong> 
	<p class="num_topics">166</p> 
</div> 
 
css: