Ожидается чтобы блок с надписью "Аренда Помещений" растянулся на всю высоту header но при этом вычиталась ширина навбара, и да javascript не предлагать.
* {
margin: 0;
}
body {
font-family: sans-serif;
}
.flex-2-cols {
display: flex;
align-items: center;
background: red;
}
.flex-2-cols>* {
width: 50%;
}
nav {
padding: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.7);
}
header {
height: 100vh;
background-position: center;
/*display: flex;*/
-webkit-background-size: cover;
background-size: cover;
background-image: url("https://cdn.pixabay.com/photo/2016/04/28/20/57/architecture-1359707_960_720.jpg");
}
<!DOCTYPE html>
<html>
<head>
<link href="./scss/main.css" rel="stylesheet">
<meta charset="utf-8">
<title>Lorem ipsum</title>
</head>
<body>
<header>
<nav>
<ul>
<li class="logo">Арендент</li>
</ul>
</nav>
<div class="flex-2-cols">
<h1>Аренда помещений</h1>
<div class="left-side-form">
<form><input type="text"></form>
</div>
</div>
</header>
</body>
</html>