* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body {
 font-family: Arial, sans-serif;
}
.container {
 display:flex;
 flex-direction: column;
 height: 100%;
}
.header {
  background: #5ec2e6;
  padding: 20px;
  display: flex;
  justify-content: center;
  gap: 30px;

}

.nav-item {
  width: 100px;
  height: 40px;
  background: lightgrey;
  align-items: center;

}
 
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 200px 200px 200px;
  gap: 20px;
  margin-top: 20px;
  margin:40px;
}
 
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: white;
  font-weight: bold;
}
 
.box1 {
  background: #e4574f;
}

.box2 {
  background: #ccc;
}

.box3 {
  background: #5ec2e6;
  grid-column: 3;
  grid-row: 1 / 4;   /* makes it tall */
  align-items: flex-start;
  padding-top: 80px;
}

.box4 {
  background: orange;
  grid-column: 1 / 3; /* spans 2 columns */
}

.box5 {
 background: #5ec2e6;
 grid-column: 1;
 grid-row: 3;
}
.box6 {
 background: #cccccc;
 grid-column: 2;
 grid-row: 3;
}