Необходимо в Header, не входящий в Grid-сетки, расположить (без повтора, но автомасштабированием) с отступами, 2fr и 2fr (left and right если ориентироваться на пропорции нижележащей Grid-сетки изображение.. Как это сделать? Перепробовал много разных вариантов - от align до margin или даже устаревших html тэгов отступа по горизонтали.
Сам сайт: https://munister-v.github.io/
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style>
.header
{
height: 8em;
padding: 2em 10%;
}
.head_img
{
background: url(img/Header.jpg) no-repeat;
background-size: cover;
margin-left: 2f;
margin-right: 2f;
}
.header,
.footer {
background-color: Gold;
height: 70px;
}
.aside {
background-color: #49423d;
}
.main {
background-color: DimGrey;
}
.m {
background-color: Gray;
height: 16.4%;
}
.header,
.main,
.aside,
.m,
.footer {
border: solid 1px red;
}
* {
margin: 0;
padding: 0;
}
.page {
margin: auto;
}
.grid-container {
display: grid;
height:100vh;
grid-template-columns: 2fr 6fr 2fr 2fr;
}
/* Smartphones (вертикальная и горизонтальная) ----------- */
@media only screen and (min-width : 350px) and (max-width : 641px)
{
.grid-container
{
grid-template-columns: 1fr;
}
.aside
{
display: none;
}
}
}
</style>
<body>
<div class="page">
<div class="header"><div class="head_img"><img src="img/Header.jpg"></div></div>
<div class="grid-container">
<div class="aside">Left</div>
<div class="main">Main</div>
<div class="block">
<div class="m">Поиск</div>
<div class="m">Свежие записи</div>
<div class="m">Свежие комментарии</div>
<div class="m">Архивы</div>
<div class="m">Рубрики</div>
<div class="m">Мета</div>
</div>
<div class="aside">Right</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>