header .top, header .top .contact, header .bottom {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex; }
* {
padding: 0;
margin: 0; }
html {
background: white;
transition: all .33s ease-out;
min-height: 101vh;
overflow-y: scroll;
overflow-x: hidden; }
header {
z-index: 2;
height: 138px;
width: 100%;
background: #f3f3f3;
vertical-align: middle;
font: 14px "PT Sans"; }
header .top {
z-index: inherit;
align-items: center;
justify-content: space-between;
height: 100px;
width: 90%;
max-width: 1100px;
margin: auto;
color: #212121;
font-size: 15px; }
header .top .logo img {
height: 23px;
width: auto; }
header .top .contact .contact-item {
height: 58px;
padding-right: 20px;
margin-right: 20px;
border-right: 1px solid #dbdbdb; }
header .top .contact .contact-item:last-child {
padding: 0;
margin: 0;
border: none; }
header .bottom {
z-index: inherit;
align-items: center;
height: 76px;
width: 90%;
max-width: 1100px;
margin: auto;
background: #797979;
color: white; }
.one-screen {
z-index: 1;
height: 100vh;
width: 100%;
background: gray; }<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<div class="top">
<div class="logo"><img src="img/logo.png" alt=""></div>
<div class="contact">
<div class="contact-item">1</div>
<div class="contact-item">2</div>
<div class="contact-item">4</div>
</div>
</div>
<div class="bottom">
<div class="menu"></div>
<div class="controls"></div>
</div>
</header>
<section class="one-screen"></section>
</body>
</html>