style.css

* {
  margin:0;
  padding: 0;
  box-sizing: border-box;
}

body {font-family: Arial, Helvetica, sans-serif;
  font-size:20pt; 
  display: grid;
}

.container-grid {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 75px auto 60px;
}

/*.container-item {} */

.header-grid {
  display: grid; 
  grid-template-columns: 60px 200px auto;
  grid-template-rows: 60px; 
}

/*.header-grid-item {} */

.header-logo {
  background-color: #fff;
  background-image: url(neil2.png);
  background-size: cover;
  margin: 10px; 
}

.header-name {
  background-color: #fff;
  font-family: 'Urbanist',Arial, Helvetica, sans-serif;
  font-size: 30pt;
  padding-top: 7px;
  margin-left: -5px;
  color: #666;  

}

.header-nav {
  background-color: #fff;
}

.col-grid {
  display: grid;
  grid-template-columns: 100px calc(100vw - 200px) 100px;
  grid-template-rows: calc(100vh - 120px);
}

/*.col-grid-item {}*/

#canvas {
  display: block;
  border: 1px solid #666;
}

.header{
  background-color: #fff;
  grid-area: hd;
}

#mainColr, #complColr {
    display:flex;
    align-items:center;
    justify-content:center;
    text-align: center;
    font-size: medium;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 10px;
}

.footer {
  grid-area: ft;
  background-color: #fff;
  color: #3F367B;
  font-size: 14px;
  text-align: center;
  padding-top: 14px;
}