Why do we use another CSS file instead of just adding the responsive rules at the bottom of main.css?

Basic CSS tutorials here will not go too deep into how a project should be organized, since that is a topic that would likely overwhelm most people new to CSS and web dev/design, but ideally, when you put a website out onto the web, you will have nearly all of the styles you have written in a single style sheet. This is better then having many, since you are requesting less files from the server to download on the client's end. However, when developing a website you want to organize your CSS into logical groups and keep them in separate files so you and your team(if you are on one) are more organized + efficient.

Tools that let you have the advantage of both include things like:

• SASS or LESS, which allows you to create a bunch of SASS or LESS files that merge into one CSS file
• Grunt or Gulp, can be run to merge a bunch of files into one output file, and many more useful things

Now, like I mentioned earlier, these are intermediate to advanced topics for CSS, and while it is okay to know about them early in your CSS learning career, I would recommend becoming pretty comfy with CSS first, so you don't overload your brain with too much stuff to remember :P

I hope this helped!

Thank you, that's a superb answer. Makes total sense. I appreciate you taking time to explain!