I cannot get my output to work properly : please revise my code.

question:

my code :

my output:

here is my code written out:

/* Window and Body Styles */

html { height: 100%; }

body { width: 95%; min-width: 640px; max-width: 960px; min-height: 100%; margin-left: auto; margin-right: auto; }

header, ul, nav, li, a { box-sizing: border-box; }

/* Row Styles */

.row { clear: both; }

.row::after { clear: both; content: ""; display: table; }

/* Page Header Styles */

header>img { display: block; width: 70%; float: left; }

header nav { float: left; padding-left: 2%; padding-right: 2%; width: 30%; }

header nav ul a { display: block; width: 100%; }

/* Horizontal Navigation List Styles */

nav.horizontal ul li { display: block; width: 12.5%; float: left; }

/* Topics Styles */

ul#topics li { display: block; width: 20%; float: left; margin-left: 0; margin-right: 1.5%; }

ul#topics li:first-of-type { margin-left: 7.75%; }

ul#topics li:last-of-type { margin-right: 7.75%; }

ul#topics li img { display: block; width: 50%; margin-left: auto; margin-right: auto; }

/* HR Styles */

hr { width: 50%; }

/* Customer Comment Styles */

#comments { width: 75%; margin: 40px auto; }

#comments li { display: block; width: 50%; float: left; margin-bottom: 30px; }

#comments li img { display: block; width: 20%; float: left; margin-left: 5%; margin-right: 5%; }

#comments li p { float: left; width: 70%; }

/* Footer Styles */

footer { clear: both; }gd

he Practice Review Assignments Next Challenge: Case Proble Apply: Case Problem 1 Data Files needed for this Case Problem: sp_home_txt.html, sp_layout_txt.css, 2 CSS files, 11 PNG files Slate & Pencil Tutoring Karen Cooke manages the website for Slate & Pencil Tutoring, an online tutoring service for high school and college students. Karen is overseeing the redesign of the website and has hired you to work on the layout of the site's home page. Figure 3-84 shows a preview of the page you'll create for Karen. Figure 3-84 Slate & Pencil Tutoring Home Page Home Our Tutors Pricing Testimonials Your Account Chat Online ErrorReporting Slate & Pencil Tutoring Instructor Portal MATI Saince English Languages History Sociology Art Cather $ Outre have advanced win experience to you mit your education Every on in you y song to hold you 24/7 We overal Beethan You for the ACT. SAT and A. xa ago reduced Thanks to Slate Fondi i passed AP Calculus with a "I use Se&iofit of the time to supplement my lectures and could notes Row, 12th Grade, Texas - kvin. 120 Grade Utah " Taking the honor roll for the inst time thanks to your wonderful service and he - List Grade Florida Geometry is a breeze after working online with your great tutos und review materia e, strade Nebraska elextbook New Perspectives on HTML Sand CSS: Comprehensive: Comprehensive Quick Tour Print Search F Annotations Accessibility Book Karen has supplied you with the HTML file and the graphic files. She has also given you a base style sheet to initiate your web design and a style sheet containing several typograp styles. Your job will be to write up a layout style sheet according to Karen's specifications. Complete the following: 1. Using your editor, open the sp_home_txt.html and sp_layout_txt.css files from the html03 case folder. Enter your name and the date in the comment section of each file, and save them as sp_home.html and sp_layout.css respectively. 2 Go to the sp_home.html file in your editor. Within the document head, create links to the sp_base.css, sp_styles.css, and sp_layout.css style sheet files. Study the content and structure of the file and then save your changes to the document. 3. Go to the sp_layout.css file in your editor. Go to the Window and Body Styles section. Create a style rule for the html element that sets the height of the browser window at 100%. 4. Create a style rule for the page body that sets the width to 95% of the browser window ranging from 640 pixels up to 960 pixels. Horizontally center the page body within the browser window. Finally, Karen wants to ensure that the height of the page body is always at least as high as the browser window itself. Set the minimum height of the browser window to 100%. Add a style rule to display all inline images as blocks. 6. Within the CSS Grid Styles section create style rule that displays the body element as a grid with four columns of length 1fr. 7. Create a style rule for the img element with id "logo" so that the logo image spans three columns and has a width of 100%. 8. For the horizontal navigation list and the footer element create a style rule so that those elements span four columns. Create a style for the aside element to span two columns 9. Within the Horizontal Navigation List Styles section create a style rule for li elements nested within the horizontal navigation list that display each element as a block eTextbook: New Perspectives on HTML5 and CSS: Comprehensive: Comprehensive Q Search Quick Tour Print TT Annotations Accessibility Books 7 Create a style rule for the img element with id "logo" so that the logo image spans three columns and has a width of 100%. For the horizontal navigation list and the footer element create a style rule so that those elements span four columns. Create a style for the aside element to span two columns 9. Within the Horizontal Navigation List Styles section create a style rule for li elements nested within the horizontal navigation list that display each element as a block with a width of 12.5% and floated on the left margin 10. Within the Section Styles section create a style rule for inline images within the section element that sets the width of the image to 50% and centers the image using a top/bottom margin of O and a left/right margin of auto. 11. Create a style rule for paragraphs within the section element that sets the width of the paragraph to 70% and centers the paragraph using a top/bottom margin of O and a left/right margin of auto. 12. Go to the Customer Comment Styles section and create a style rule for the aside element setting the width to 75% and the bottom padding to 30 pixels. 13. The six aside elements will be displayed in two columns. For odd-numbered aside elements, use the justify-self grid property to place the element on the end (right) margin. (Hint: Use the nth-of-type(odd) pseudo-class to select the odd-numbered aside elements.) 14. Float inline Images nested within the aside element on the left with a width of 20%. 15. Float paragraphs nested within the aside element on the left with a width of 75% and a left margin of 5%. 16. Save your changes to the file and then open the sp_home.html file in your browser. Verify that the layout and appearance of the page elements resemble that shown in Figure 3-84. img { 56 display: block; width: 70%; 58 float: left; } 61 aheader nav { float: left; naddince1 ft.2. Cascade Style Sheets File 54 55 header>img { 56 display: block; 57 width: 70%; 58 float: left; } 60 61 Ehcader nav { 62 float: left; padding-left: 24; I 64 padding-right: 2%; 65 width: 30%; 1 68 wheader navul a { display: block; 70 width: 100%; 71 ) 72 73 /* Horizontal Navigation List Styles +/ 75 76 nav.horizontal ul li { 77 display: block; 78 width: 12.5%; 79 float: left; 80 3 81 82 83 /* Topics Styles */ 85 Eul#topics li { 86 display: block; 87 width: 20%; 88 float: left; margin-left: 0; 90 margin-right: 1.5%; 91 92 93 Bul#topics li:first-of-type { margin-left: 7.75%; 95 -3 98 97 sul#topics li: last-of-type { 98 margin-right: 7.75%; } 100 101 eul#topics li img { 102 display: block; width: 50%; margin-left: auto; 104 Cascade Style Sheets File Type here to search o BE } 92 93 Eul#topics li:first-of-type { 94 margin-left: 7.75%; 95 } 96 97 Jul#topics li:last-of-type { margin-right: 7.75% i } IDO 101 Lul#topics li.img { 102 display: block; 103 width: 50%; 104 margin-left: auto; 105 margin-right: auto; 106 -} 107 108 109 /* HR Styles */ 110 111 Ehr { 112 width: 50%; 113 114 115 116 /* Customer Comment Styles */ 120 128 118 #comments { width: 75%; margin: 40px auto; 1121 } (122 123 comments li { 124 display: block; 125 width: 50%; 126 float: left; 127 margin-bottom: 30px; } 129 130 #comments li img { display: block; 132 width: 20%; 133 float: left; margin-left: 5%; 135 margin-right: 5%; ) 137 138 #comments li p { float: left; width: 70%; Cascade Style Sheets File Type here to search D Slate & Pencil Tutoring Home Our Tutors Pricing Testimonials Your Account Chat Online Error Reporting Instructor Portal Math Science English Languages History Sociology Art Other