Good day! There was a need for one of the additional pages of the site to make the header smaller, and the left sidebar to move up to the remaining piece of its place. The problem is that with the settings attached below, the header shifts. Help me please :) 
[![Example
<style> header { width: 96.1%; min-height: 202px; /*border*/ border-top: 22px solid #000; border-bottom: 13px solid #000; border-left: 22px solid #000; border-right: 22px solid #000; margin: 0 auto; /*border ends*/ } .container { max-width: 898px; margin: 0 auto; } .logo { width: 100px; height: 86px; margin: 0 auto; padding-top: 30%; padding-right: 40%; } .title__first { margin-top: 6px; margin-left: 0px; padding-right: 0px; font-size: 36px; font-family: Impact, sans-serif; color: #fff; text-shadow: 0px 4px rgba(0, 0, 0, .34); text-align: center; } .img2 { width: 300px; height: px; } h1 { font-size: 17px; font-family: Lobster, sans-serif; letter-spacing: 1px; font-weight: normal; color: #fff; text-align: center; margin-top: 3px; padding-right: 0px; } .title__second { font-size: 18px; color: #000000; font-family: Impact, sans-serif; text-shadow: 1px 0.5px 3px rgba(255,255,255,0.6); background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; letter-spacing: -0.55px; text-align: center; margin-top: 2px; margin-left: 0px; padding-right: 0px; } .main__menu { height: 13px; float: none; margin-top: 1.5%; } .main__menu ul li > a:hover { color: black; transition: 0.2s; } .menu { padding: 0; margin: 0; display: block; position: relative; left: -11.1%; } ul { padding-top: 11px; } .menu li { float: left; display: block; margin: 0 auto; width: 10%; text-align: center; padding-left: 23%; } .menu li a { color: white; text-decoration: none; font-size: 19px; font-family: Courier, sans-serif; font-weight: bolder; } .items { margin-left: 31.4%; width: 60%; height: 100%; display: inline-block; float: left; padding-left: 3px; padding-top: 30px; } .item_1 { display: inline-block; width: 200px; height: 300px; border: 2px solid black; margin-left: 0px; } .item_2 { display: inline-block; width: 200px; height: 300px; border: 2px solid black; margin-left: 11.36px; } .item_3 { display: inline-block; width: 200px; height: 300px; border: 2px solid black; margin-left: 11.36px; } </style> <html lang="en"> <head> <meta charset="UTF-8"> <title>ШвейПокров</title> <?php require_once $_SERVER['DOCUMENT_ROOT'].'/objects/css_product-page.php'; ?> <?php require_once $_SERVER['DOCUMENT_ROOT'].'/objects/fonts.php'; ?> </head> <body> <div id="page-wrapper"> <header class="clearfix"> <div class="container"> <?php require_once $_SERVER['DOCUMENT_ROOT'].'/objects/logotip.php'; ?> <div class="titles"> <div class="title__first"> "ШвейПокров" </div> <h1>Православная швейная мастерская</h1> <div class="title__second"> доставка по всей России </div> </div> <div class="main__menu"> <ul class="menu"> <li> <a href="../index.php" id="izdeliya">Главная</a> </li> <li> <a href="../contacts.php" id="Kontakty">Контакты</a> </li> <li> <a href="../about.php" id="O__nas">О нас</a> </li> </ul> </div> </div> </header> <section> <div class="container1"> <div class="items"> <div class="item_1">1</div> <div class="item_2">2</div> <div class="item_3">3</div> <div class="item_4"></div> </div> </div> <?php require_once $_SERVER['DOCUMENT_ROOT'].'/left_menu.php'; ?> </section> <?php require_once $_SERVER['DOCUMENT_ROOT'].'/objects/footer.php'; ?> /*This is CSS RESET*/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*This is the END of CSS RESET*/ /*This is the END of CSS RESET*/ /*This is the END of CSS RESET*/ body, html { background-color: #B63D32; margin: 0 auto; padding: 0; position: relative; } div { box-sizing: border-box; } #page-wrapper { width: 100%; font: 100%/1.4em,Helvetica,Arial,sans-serif; margin: 0; padding: 0; } header{ width: 832px; min-width: 832px; min-height: 202px; /*border*/ border-top: 22px solid #000; border-bottom: 13px solid #000; border-left: 22px solid #000; border-right: 22px solid #000; margin: 0 auto; margin-right: 0px; /*border ends*/ } .container { max-width: 898px; margin: 0 auto; } .logo { width: 85px; height: 86px; margin: 0 auto; padding-top: 2px; padding-right: 9.85%; } .title__first { margin-top: 6px; margin-left: 0px; padding-right: 0px; font-size: 36px; font-family: Impact, sans-serif; color: #fff; text-shadow: 0px 4px rgba(0, 0, 0, .34); text-align: center; } .img2 { width: 300px; height: px; } h1 { font-size: 17px; font-family: Lobster, sans-serif; letter-spacing: 1px; font-weight: normal; color: #fff; text-align: center; margin-top: 3px; padding-right: 0px; } .title__second { font-size: 18px; color: #000000; font-family: Impact, sans-serif; text-shadow: 1px 0.5px 3px rgba(255,255,255,0.6); background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; letter-spacing: -0.55px; text-align: center; margin-top: 2px; margin-left: 0px; padding-right: 0px; } .main__menu { height: 13px; float: none; margin-top: 1.5%; } .main__menu ul li > a:hover { color: black; transition: 0.2s; } .menu { padding: 0; margin: 0; display: block; position: relative; left: -11.1%; } ul { padding-top: 11px; } .menu li { float: left; display: block; margin: 0 auto; width: 10%; text-align: center; padding-left: 23%; } .menu li a { color: white; text-decoration: none; font-size: 19px; font-family: Courier, sans-serif; font-weight: bolder; } section { width: 96.1%; height: 640px; /*border*/ border-bottom: 13px solid #000; border-left: 22px solid #000; border-right: 22px solid #000; margin: 0 auto; margin-top: -16px; /*border ends*/ } .container1 { height: 640px; margin-left: 0px; margin-top: 16px; margin-right: 0px; background-color: #BFBFBF; background-image: url(../img/fon.png); -webkit-background-size: cover; /* Для хрома */ -moz-background-size: cover; /* Для лисы*/ -o-background-size: cover; /* Для оперы*/ -ms-background-size: cover; /* Для ИЭ*/ background-size: cover; /* Для закрипления*/ background-position: 19%; background-repeat: no-repeat; } .spisok { height: 640px; width: 238px; background-color: #7B2019; position: relative; top: -100%; /*border*/ border-bottom: 0px solid #000; border-left: 0px solid #000; border-right: 15px solid #000; /*border ends*/ } .spisok li { width: 195px; height: 45px; display: block; margin-right: 10px; margin-left: 13.2px; background-image: url(../img/span_menu.png); color: rgba(222,222,222 .1); background-size: cover; -webkit-transition: All 0.3s ease-in-out; -moz-transition: All 0.3s ease-in-out; -o-transition: All 0.3s ease-in-out; -ms-transition: All 0.3s ease-in-out; transition: All 0.3s ease-in-out; } #oblacheniya { margin-top: 16px; } .spisok li a { width: 100%; height: 100%; text-decoration: none; font-family: CyrillicOldBold, sans-serif; letter-spacing: 0.5px; color: white; text-decoration: none; font-size: 16px; font-weight: normal; position: relative; display: list-item; text-align: -webkit-match-parent; text-align: center; padding-left: 9px; } .spisok ul > li:hover{ background-image: url(../img/span_menu_hover.png); background-repeat: no-repeat; background-size: cover; -webkit-transition: All 0.3s ease-in-out; -moz-transition: All 0.3s ease-in-out; -o-transition: All 0.3s ease-in-out; -ms-transition: All 0.3s ease-in-out; transition: All 0.3s ease-in-out; } .spisok ul li > a:hover{ text-shadow: gold 0 0 40px; /* Свечение голубого цвета */ color: white; } .spisok ul li ap { padding-top: 14px; margin-top: 5px; } #ugol { background-image: url(../img/span_menu_black.png); } .text-div { width: 158px; height: 30px; text-align: center; margin-left: -9px; } .letter-spacing { letter-spacing: 1px; } .ryasi { letter-spacing: 2px; } .Nashi_Tseny { /* Абсолютное позиционирование */ float: none; margin: 0 auto; width: 100%; /* Ширина слоя в процентах */ height: 100%; /* Высота слоя в процентах */ position: relative; top: 4%; left: -0.5%; } .text_1 { width: 600px; height: 400px; font-size: 16px; line-height: 25px; font-family: Courier New, sans-serif; font-style: normal; margin: 0 auto; position: relative; left: 8%; top: 1%; } h2 { font-size: 35px; font-family: Impact; font-weight: 400; margin: 0 auto; padding-top: 5px; text-decoration: underline; text-align: center; } strong { font-weight: bolder; font-size: 16px; } #vocem_tis { font-style: italic; font-weight: 900; font-family: Lobster, sans-serif; font-size: 15px; } footer { width: 96.1%; height: 115px; /*border*/ border-bottom: 15px solid #000; border-left: 22px solid #000; border-right: 22px solid #000; margin: 0 auto; /*border ends*/ } 
width: calc(100% - 250px);functionwidth: calc(100% - 250px);. Only instead of 250 pixels substitute the width of the sidebar - fanfer