A tip I give you is to try to plan your website / system to the maximum before creating it, because in this way you will be able to better determine the paddings, margins, floats, flexboxs, etc., making in the time to adjust in the stockings querys, do not have as much "re-work".
Use for example the following queries:
// Dispositivos extra small (telefones em modo retrato, com menos de 576px)
// Sem media query para 'xs', já que este é o padrão, no Bootstrap.
// Dispositivos small (telefones em modo paisagem, com 576px ou mais)
@media (min-width: 576px) { ... }
// Dispositivos médios (tablets com 768px ou mais)
@media (min-width: 768px) { ... }
// Dispositivos large (desktops com 992px ou mais)
@media (min-width: 992px) { ... }
// Dispositivos extra large (desktops grandes com 1200px ou mais)
@media (min-width: 1200px) { ... }
Always think of the minimum width of each of them, before reaching the breakpoint, because in this way, you do not make several adjustments within a media query so after resizing some more, find that you need another adjustment, an example: @media (min-width: 1200px) { ... } , you use 1200px as the basis for your responsiveness and not for example 1920px, so by setting to 1200px that is the breakpoint, you will know that all other resolutions above that will be working.
Bonus Tip: I do not know if you use some kind of CSS framework like Bootstrap for example, but I highly recommend and use it even more for the Grids and other classes that already help in responsiveness in the writing of the HTML code, without having to try so hard with several lines of code after using pure CSS.
I hope to have helped, strong embrace and success!
