Challenge 4

During the code review, the following issues were identified in the CSS Errors:

• <main> is an HTML tag, not a CSS selector. It should be main without angle brackets.
• typeface-family is incorrect. The correct property is font-family.
• 'Cardo' should be in quotes, but the entire property is missing a space after the colon.
• The width: 70px; seems very narrow for a main content area.
• margin-bottom: 20; is missing a unit (e.g., px, em, %).
• padding-right: 3; and padding-left: 3; are missing units.
• margin-top: 35; is missing a unit.
• The closing brace } for the main selector is misplaced.
• There's an extra . before aside, which is unnecessary if it's meant to be a class selector.
• display: diamonds; is not a valid display value.
• The body selector is malformed. It should be body { not body [.
• background-colour in #menu-icon uses British spelling. CSS uses American spelling: background-color.
• 4:hover#menu-icon is not a valid selector. If it's meant to target the hover state of #menu-icon, it should be #menu-icon:hover.
• display: hidden; is incorrect. The correct value is display: none;.
• h2 has Width capitalized, which is incorrect. CSS properties are case-sensitive.
• h2 has hight which is misspelled. It should be height.
• The HTML comment <!-- active applies to when the link is clicked --> doesn't belong in CSS. CSS comments use /* */.
• header nav a:active and header nav a:visited are defined after a general body rule, which might cause specificity issues.
• header nav a:visited has a space before the colon in color : #FFFFFF;, which is unnecessary.
• .header nav a:hover uses a class selector for header, while previous rules used an element selector. This inconsistency might cause issues.
• The footer rule is placed at the end, which might cause it to override previous rules unintentionally.
• There's inconsistent use of shorthand properties. For example, some rules use individual margin properties while others use shorthand.
• Color values are inconsistently formatted. Some use hex codes, others use color names.
• There's no consistent indentation or formatting, making the code hard to read.
• Some rules are missing semicolons at the end of each property (e.g., in the <main> rule).