Html 调试网格样式和格式

我正在做一个作业，需要调试代码中的错误。我已经完成了一半，但是在网格样式上遇到了障碍。它应该看起来像图片，但我无法正确格式化。感谢您的帮助。我不是在寻找答案，但朝着正确的方向轻推会非常有帮助。多谢各位

---

有一个输入错误

标题{grid area:headers；}

应该是

标题{grid area:header；}

没有“s”来匹配

网格模板区域：…

链接、资产净值、优惠券、页脚相同

头{网格区域：头；}
水平导航{网格区域：链接；}
垂直{网格区域：nav；}
第{条网格区域：主要；}
节{网格区域：优惠券；}
旁边{网格区域：边；}
页脚{网格区域：页脚；}

同样根据图片，看起来区域应该更像这样

网格模板区域：“标题”
“链接”
“侧1主导航”
“第1方息票资产净值”
“页脚”；

body {
  min-width: 600px;
  max-width: 1024px;
  width: 90%;
   
   display: grid;
   grid-template-columns: 200px auto 200px; 
   grid-template-areas: "header header header"
                        "link link link"
                        "side1 main nav"
                        "coupon coupon coupon"
                        "sides sides sides"
                        "footer footer footer";
   grid-gap: 10px 25px;
}

/* Grid Areas */
header {grid-area: headers;}
nav.horizontal {grid-area: links;}
nav.vertical {grid-area: navs;}
article {grid-area: main;}
section {grid-area: coupons;}
aside {grid-area: sides;}
footer {grid-area: footers;}

/* Image Styles */
header img {
   display: block;
   width: 100%;
}

/* Horizontal Navigation List Styles */
nav.horizontal ul {
   width: 100%;
   display: grid;
   grid-template-columns: repeat (5fr, 1fr);
}
nav.horizontal ul li {
   display: block;
   text-align: center;
}

/* Coupon Section Styles */
section {
   display: grid;
   grid-template-columns: repeat (3fr, 1fr);
   grid-gap: 20px;
}

section div {
   outline: 4px dashed gray;
   position: relative;
}

section div p.last-of-type {
   position: absolute;
   bottom: 1px;
   right: 5px;
}