Responsive Product Card Component Made with HTML and CSS

Hello, just finished this project and I noticed/have a question about two things. First I have some issues with centering content and its width and height thus my question: are there some best practices considering placement of page/element within body of a page (for example the page width should cover full width of a body, there should be no space between top browser bar and page content itself etc)? Second: is there a way to change src of an image from CSS file media query or it is better to use picture tag with sources? Or perhaps there is a way to interact with source from media query General feedback also welcome!