مشکل در طراحی صفحه وب

[Iran58]

سلام
من کدهای زیر را نوشته ام

<div class="container wrapper">
<header>
<div class="row">
<div class="col-8 bg-dark">1</div>
<div class="col-4 bg-info">2</div>
</div>
</header>
<main class="">@RenderBody()</main>
<footer class="">
11111
</footer>
</div>


و

html {
box-sizing: border-box;
}

html *,
html *::after,
html *::before {
box-sizing: inherit;
}

* {
margin: 0;
padding: 0;
}

html,
body {
height: 100%;
min-height: 100%;
font-family: 'BYekan';
}

ul {
list-style: none;
}

.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}

header {
height: 100px;
background-color: cornsilk;
}

main {
flex-grow: 1;
display: flex;
flex-direction: column;
}

footer {
background-color: #D7E4E4;
text-align: center;
color: #284040;
height: 50px;
}


اما در header وقتی divهارا قرار میدهم از اندازه header بیشتر است وداخل ان قرار نمیگیرد
150502

[Aalibeigi]

والا من که از این کد ها سر در نیوردم.
قالبشون به سی اس اس نمیخوره
چرا کلاس و id تعریف نمیکنین تو سی اس اس و بعد تو اچ تی ام ال فراخوانی نمیکنین؟
اینطور خیلی همه چی توی همه