Youve been given the initial HTML and CSS code for this web page, but there are several errors in the CSS stylesheet. Use your knowledge of CSS to locate and fix the errors.

STEPS:

DEBUG3-4_CSS: @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: 600px;

max: 1024px;

margin: 10px auto;

display: grid;

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

grid-areas-template: "header header header";

"link link link";

"nav main side";

"nav coupons side";

"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-columns-template: repeat 5/1fr;

}

nav.horizontal ul li {

display: block;

text-align: center;

}

/* Coupon Section Styles */

section {

display: grid;

grid-columns-template: 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;

}

CODE3-4.CSS

@charset "utf-8";

/*

New Perspectives on HTML5 and CSS3, 8th Edition

Tutorial 3

Coding Challenge 4

Author:

Date:

Filename: code3-4.css

*/

body {

font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

}

ul {

margin: 0;

padding: 0;

}

li {

list-style-type: none;

}

nav.horizontal {

background-color:rgba(154,20,23,1.00);

height: 30px;

}

nav.horizontal a {

color: white;

}

nav.vertical ul {

line-height: 2em;

}

article p {

font-size: 1.2em;

font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";

}

aside ul li {

margin: 15px 5px;

background-color:rgba(229,129,131,1.00);

padding: 5px;

}

a {

text-decoration: none;

color: rgb(101, 101, 101);

}

section div h1 {

font-size: 1em;

text-align: center;

background-color:rgba(154,20,23,1.00);

color: white;

margin: 0;

}

section div {

padding-bottom: 20px;

}

section div p {

font-size: 0.9em;

text-align: center;

}

section div p:last-of-type {

font-size: 0.65em;

text-align: right;

color:rgba(154,20,23,1.00);

}

aside h1 {

text-align: center;

font-size: 1.2em;

font-weight: normal;

}

footer {

text-align: center;

color: white;

font-size: 1em;

height: 30px;

line-height: 30px;

background-color:rgba(154,20,23,1.00);

}

Open the debug3-4.css file. The body element should have a width that is 90% of the width of the browser window ranging from a minimum of 600 pixels up to a maximum of 1024 pixels. Fix the syntax errors in the body style rule that defines the width of the web page. The style rule for the body element sets up a grid layout for the page. However, there are several errors in defining the grid areas, grid columns, and grid gaps. Fix the syntax errors in the style rule. There are issues with grid column styles globally in debug3-4.css. 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 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. Open the website in the browser preview and verify that design of the page resembles that shown in Figure 3-82