body,
html {
height: 100%;
}

body {
font-family: sans-serif;
font-size: 1em;
background-image: url(images/queenssky.png);
background-size: cover;
}

 .container {
display: grid;

width: 100%;
height: 100%;
grid-template-areas:
"header header header"
"navbar navbar navbar"
"left main right"
"footer footer footer";
grid-template-columns: 1fr 800px 1fr;
grid-template-rows: 160px 40px  1fr 80px;
}

.container>div {
border: 1px dashed #888;
}

.header {
grid-area: header;
display: flex;
}

.navbar {
  background-color:cornflowerblue;
  overflow: hidden;
}

.navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: "search", sans-serif;
font-weight: 400;
font-style: normal;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

.navbar a.active {
  background-color: cornflowerblue;
  color: white;
}

.logo {
display: flex;
justify-content: center;
flex-grow: 1;

}

.left {
grid-area: left;
font-family: "search", sans-serif;
font-weight: 400;
font-style: normal;
}

.main { 
grid-area: main;
text-align: center;
font-family: "search", sans-serif;
font-weight: 400;
font-style: normal;
}

.right {
grid-area: right;

}

.h1 {
  font-family: "search", sans-serif;
font-weight: 400;
font-style: normal;
}

.footer {
grid-area: footer;
font-family: "search", sans-serif;
font-weight: 400;
font-style: normal;
}

.social {
/* border: 2px dashed white; */
padding: 10px;
}

.social img {
margin-left: 5px;
}

.logo {
display: flex;
flex-grow: 1;
}

.header div {
flex-grow: 1;
}

.box {
 display: flex;
 flex-grow: 1;
}

.box div{
/* border: 2px dashed white; */
flex-grow: 1;
}