I really need help with debug3-4.css file. I have the first 3 sections checked off I'm stuck on the last 3 sections.

Go to the style rules in the "Grid Areas" section that assigns page elements to areas of the grid. Locate and fix the errors in assigning elements to grid areas.

The style rules for the horizontal navigation list and the section element also define grid styles for those elements. Locate and fix errors in the code that set up the grid columns.

The last paragraph within the section div selector should be placed with absolute positioning 1 pixel and 5 pixels from the bottom right corner of the container element. However, there is an error in defining the selector. Find and fix the error.

I've enclosed the code and what I have so far.

@charset "utf-8";

/*

New Perspectives on HTML5 and CSS3, 8th Edition

Tutorial 3

Coding Challenge 4

Author:

Date:

Filename: debug3-4.css

*/

/* Page Body Styles */

body {

width: 90%;

min-width: 600px;

max-width: 1024px;

margin: 10px auto;

display: grid;

grid-template-columns: 200px auto 200px;

grid-template-areas: "headers headers headers";

grid-template-areas: "links links links";

grid-template-areas: "navs main sides";

grid-template-areas: "navs coupons sides";

grid-template-areas: "footers footers footers";

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 (5, 1fr);

}

nav.horizontal ul li {

display: block;

text-align: center;

}

/* Coupon Section Styles */

section {

display: grid;

grid-template-columns: repeat (3, 1fr);

grid-gap: 20px;

}

section div {

outline: 4px dashed gray;

position: relative;

}

section div p:last-of-type {

position: absolute;

bottom: 1px;

right: 5px;

}