Responsive layout using pure HTML and CSS

I am always wondering what the best practice of css and html layout is since I think I am using too many separate selectors and causing many lines of css for a simple webpage.

Also, I don't know if it is appropriate to fine-tune every element with separate attributes like margin and padding, or if is it always better to adjust them within a universal selector.

Please review my css and give me some suggestion