My first attempt at creating a website layout using grid was successful in Firefox, but not in Chrome and Opera. The header is taking up only about 1/3 of the width, leaving the rest empty on these browsers. However, everything else, including the mobile layout, seems to be working fine. I have checked that all my browsers are up to date.
I am unsure how to address this issue.
div.container {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr;
grid-template-areas:
"site-header site-header site-header"
"site-nav content sidebar";
grid-gap: 0;
max-width: 100%;
min-height: 100%;}
.site-header {
grid-area: site-header;
height: 250px;
border-bottom: 2px solid #999;
text-align: center;
display: table;
background-color: green;}