The code below labeled "Raw Code Input" is the raw, unedited code you submitted to this tool; the code below labeled "Cleaned Code" is same code, but processed to fix your indentation issues. However, certain dirty code issues (particularly logic errors) may prevent this tool from correctly fixing your indentation, such as missing curly brackets.
Hover over a line or line number with an error, and the particular issues associated with that line will show up in a tool tip. Hovering over a line with the opening or closing curly bracket of an CSS Rule or Media Query will cause the lines of both its opening and closing curly brackets to be highlighted.
We recommend addressing the issues one at a time from top to bottom. Sometimes, addressing an issue earlier on in your code can fix issues lower down.
Below are the clean code issues this tool was able to detect in your code. However, note that this tool is best at detecting syntax issues (i.e. issues with the grammar of a programming language) and suggesting how to fix them. Logic errors, on the other hand, are harder for it to target specifically.
NOTE: If you have discovered the relatively new method of writing CSS Rules referred to as "CSS Nesting", you will find that the CSS Dirty Code Report considers this approach as "dirty" code, since it is more advanced and also not what we teach in this curriculum. However, if you have spoken with your instructor and they feel you are ready to use CSS Nesting, add the following text to the end of the URL for this page and refresh it to enable an manual override which allows for CSS Nesting: ?allowCSSNesting