пытаюсь сверстать сайдбар и шапку на гридах, в итоге никак не получается чтобы сверху была шапка, а сайдбар начинался прямо под логотипом.
Код HTML:
<body>
<div class="body_wrapper">
<header class="header">
<div class="container">
<div class="header__container__inner">
<div class="header__container__inner__logo">
<svg width="76" height="23" viewBox="0 0 76 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 2.07211C0 1.89891 0.0729144 1.81232 0.229159 1.81232H7.62475C8.87471 1.81232 9.93718 2.26695 10.8017 3.1654C11.6663 4.06385 12.1038 5.16797 12.1038 6.46694C12.1038 7.77672 11.6663 8.89167 10.8017 9.79012C9.93718 10.6886 8.87471 11.1432 7.62475 11.1432H4.70818V17.4215C4.70818 17.5947 4.62485 17.6813 4.45819 17.6813H2.02077C1.85411 17.6813 1.77078 17.5947 1.77078 17.4215V4.06385H0.229159C0.0729144 4.06385 0 3.97726 0 3.80406V2.07211ZM7.0831 8.58858C7.63517 8.58858 8.11432 8.38291 8.51014 7.98239C8.90596 7.58188 9.10387 7.07312 9.10387 6.46694C9.10387 5.87158 8.90596 5.37364 8.52056 4.97313C8.13515 4.57261 7.656 4.36694 7.10394 4.36694H4.70818V8.58858H7.0831Z" fill="white"/>
<path d="M17.1244 0.816406C17.2494 0.816406 17.3119 0.881355 17.3119 1.01125V17.4215C17.3119 17.5947 17.239 17.6813 17.0827 17.6813H14.8537C14.687 17.6813 14.6037 17.5947 14.6037 17.4215V2.93805H13.3329C13.1975 2.93805 13.1245 2.8731 13.1245 2.7432V1.01125C13.1245 0.881355 13.1975 0.816406 13.3329 0.816406H17.1244Z" fill="white"/>
<path d="M25.0826 17.9628C24.3013 17.9628 23.5722 17.8113 22.8847 17.5082C22.1972 17.2051 21.5931 16.7938 21.0827 16.2742C20.5723 15.7546 20.1661 15.1376 19.864 14.434C19.5619 13.7304 19.4161 12.9726 19.4161 12.1824C19.4161 11.3922 19.5619 10.6453 19.864 9.94173C20.1661 9.23813 20.5723 8.63194 21.0827 8.11236C21.5931 7.59277 22.1972 7.18143 22.8847 6.87834C23.5722 6.57525 24.3013 6.42371 25.0826 6.42371C25.8638 6.42371 26.5929 6.57525 27.2804 6.87834C27.9679 7.18143 28.5616 7.59277 29.072 8.11236C29.5824 8.63194 29.9782 9.23813 30.2803 9.94173C30.5824 10.6453 30.7282 11.3922 30.7282 12.1824C30.7282 12.9726 30.5824 13.7304 30.2803 14.434C29.9782 15.1376 29.5824 15.7546 29.072 16.2742C28.5616 16.7938 27.9679 17.2051 27.2804 17.5082C26.5929 17.8113 25.8534 17.9628 25.0826 17.9628ZM25.0826 8.95669C24.2597 8.95669 23.5618 9.2706 22.9889 9.89843C22.416 10.5263 22.1243 11.284 22.1243 12.1824C22.1243 13.0809 22.416 13.8386 22.9889 14.4665C23.5618 15.0943 24.2597 15.4082 25.0826 15.4082C25.9159 15.4082 26.6138 15.0943 27.1867 14.4665C27.7596 13.8386 28.0408 13.0809 28.0408 12.1824C28.0408 11.284 27.7596 10.5263 27.1867 9.89843C26.6138 9.2706 25.9159 8.95669 25.0826 8.95669Z" fill="white"/>
<path d="M31.9365 9.0648C31.8115 9.0648 31.749 8.98902 31.749 8.8483V6.94315C31.749 6.81326 31.8115 6.74831 31.9365 6.74831H33.4572V3.67409C33.4572 3.5442 33.5302 3.47925 33.6656 3.47925H35.978C36.1134 3.47925 36.1863 3.5442 36.1863 3.67409V6.74831H38.2904C38.4258 6.74831 38.4988 6.81326 38.4988 6.94315V8.8483C38.4988 8.98902 38.4258 9.0648 38.2904 9.0648H36.1863V13.871C36.1863 14.3905 36.2592 14.8235 36.4051 15.1699C36.5509 15.5163 36.905 15.6895 37.4779 15.6895C37.78 15.6895 38.0717 15.657 38.3529 15.5813C38.3946 15.5704 38.4363 15.5596 38.4779 15.5596C38.53 15.5596 38.5612 15.6137 38.5612 15.7328V17.4648C38.5612 17.6055 38.4883 17.6921 38.3529 17.7246C37.78 17.8436 37.2175 17.8978 36.6446 17.8978C35.4884 17.8978 34.676 17.573 34.1864 16.9235C33.6968 16.274 33.4572 15.2241 33.4572 13.7844V9.0648H31.9365Z" fill="white"/>
<path d="M40.7487 17.6812C40.5821 17.6812 40.4987 17.5946 40.4987 17.4214V15.5379C40.4987 15.3756 40.5821 15.2998 40.7487 15.2998H42.5612C42.7174 15.2998 42.7903 15.3756 42.7903 15.5379V17.4214C42.7903 17.5946 42.7174 17.6812 42.5612 17.6812H40.7487Z" fill="white"/>
<path d="M44.9673 8.89174C44.8319 8.89174 44.759 8.81597 44.759 8.67524V6.94329C44.759 6.8134 44.8319 6.74845 44.9673 6.74845H48.4672C48.6026 6.74845 48.686 6.8134 48.7172 6.94329L48.9047 7.85257C49.3318 7.3871 49.8526 7.04072 50.4568 6.79175C51.0609 6.54278 51.6859 6.42371 52.3421 6.42371C53.79 6.42371 54.7483 6.99742 55.217 8.15566C55.7274 7.54948 56.3107 7.10566 56.9461 6.83505C57.5815 6.56443 58.2482 6.42371 58.9252 6.42371C60.0398 6.42371 60.8523 6.75927 61.3731 7.41958C61.8939 8.07989 62.1543 8.97834 62.1543 10.1041V17.4216C62.1543 17.5948 62.0814 17.6814 61.9252 17.6814H59.6752C59.519 17.6814 59.4461 17.5948 59.4461 17.4216V10.2773C59.4461 9.41132 58.9773 8.97833 58.0294 8.97833C57.5295 8.97833 57.0503 9.10823 56.592 9.37885C56.1337 9.64947 55.7899 10.0283 55.5503 10.5371V17.4216C55.5503 17.5948 55.4774 17.6814 55.3212 17.6814H53.0713C52.915 17.6814 52.8421 17.5948 52.8421 17.4216V10.2773C52.8421 9.41132 52.3734 8.97833 51.4255 8.97833C50.9255 8.97833 50.4463 9.10823 49.988 9.37885C49.5297 9.64947 49.186 10.0392 48.9464 10.5587V17.4216C48.9464 17.5948 48.8735 17.6814 48.7172 17.6814H46.4881C46.3215 17.6814 46.2381 17.5948 46.2381 17.4216V10.234L46.1756 8.89174H44.9673Z" fill="white"/>
<path d="M63.4875 8.89158C63.3625 8.89158 63.3 8.81581 63.3 8.67509V6.94314C63.3 6.81324 63.3625 6.74829 63.4875 6.74829H66.3833C66.5395 6.74829 66.6437 6.82407 66.6957 6.96479L69.5915 14.5421L72.4664 6.96479C72.5185 6.82407 72.6331 6.74829 72.7997 6.74829H75.0288C75.1955 6.74829 75.2476 6.82407 75.1746 6.96479L68.904 22.3792C68.8311 22.5199 68.7269 22.5957 68.5707 22.5957H65.4874C65.3625 22.5957 65.3 22.5307 65.3 22.4008V20.6689C65.3 20.539 65.3625 20.474 65.4874 20.474H67.2791L68.3832 17.6379L64.7791 8.89158H63.4875Z" fill="white"/>
</svg>
</div>
<div class="header__container__inner__title">
<div class="header__container__inner__title_text">
Администрирование
</div>
</div>
<div class="header__container__inner__adminicon">
<svg width="50" height="65" viewBox="0 0 50 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25 33C27.4752 33 29.5 30.975 29.5 28.5C29.5 26.025 27.4752 24 25 24C22.5248 24 20.5 26.025 20.5 28.5C20.5 30.975 22.5248 33 25 33ZM25 35.25C22.0188 35.25 16 36.7688 16 39.75V42H34V39.75C34 36.7688 27.9812 35.25 25 35.25Z" fill="white"/>
</svg>
</div>
</div>
</div>
</header>
<div class="sidebar">
<div class="container">
<nav class="sidebar__navbar">
<div class="sidebar__navbar__profile">
<div class="sidebar__navbar__profile__avatar">
<img src="images/avatar.svg">
</div>
<div class="sidebar__navbar__profile_name">
<div class="sidebar__navbar__profile_name_text">
Добро пожаловать, Абубачир
</div>
</div>
</div>
<div class="navbar__nav">
<ul>
<li class="first"><a href="#"></a></li>
<li class="second"><a href="#"></a></li>
<li class="third><a href="#"></a></li>
<li class="fourth"><a href="#"></a></li>
<li class="fifth"><a href="#"></a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</body>
Код CSS:
Dmitrijs Balcers url('
https://fonts.googleapis.com/css2?family=Roboto:wg...');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header__container__inner{
display: grid;
grid-template-columns: 217px 855px 36px;
align-items: center;
}
.header__container__inner__title{
font-family: 'Roboto', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 24px;
color: #FFFFFF;
}
.header{
width: 100%;
overflow: hidden;
min-height: 65px;
background: #6945FF;
grid-area: header;
}
.body_wrapper{
display: grid;
grid-template-areas: "header header "sidebar main" "footer footer";
}
.sidebar{
grid-area: sidebar;
}
Помогите пожалуйста, не понимаю в чем проблема
Простой
