Responsive layout using the element img with width 100%

I've been facing some challenges while working on this project, particularly when it comes to implementing responsive design using media queries. I find it quite difficult to determine the optimal number of media queries for different screen sizes in my CSS. For instance, when I set a media query at 1400 pixels, everything seems to work fine, and the layout adjusts accordingly. However, the problem arises when the screen size falls below 1400 pixels. At that point, my website loses its responsiveness, and elements start to misalign.

Do I need to incorporate a range of media queries to cater to various screen sizes more effectively? To ensure that my website remains responsive and visually appealing across a wide spectrum of devices.

There's something I'm doing that isn't working well. Isn't there a way to make elements responsive without having to create multiple media queries?