Product page. HTML, CSS, SCSS.

NEVER GIVE UP

Looks like you did it. It is just too big.

If someone can suggest a specific way and methodology that I can follow to match the exact design and improve

It doesn't have to be pixel perfect. It needs an educated eye to determine exactly how big are the gaps, fonts etc. without figma file. But best way i think is to look both mobile and desktop design and determine which things are belongs in which group (like you did here; 1 img container and 1 text container together in a container) and decide when/how to change layouts then start with mobile to desktop.

Also use a css reset everytime

What are the best ways to center containers for these projects?

Flex or Grid. Which one to use? It is personal choice most of the times. You can make a 5x5 grid with flex but that wouldn't be efficient ofc.

If you are asking to center whole product card and other challanges, this should do the trick

body {
min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

I guess you had problem with the second col which you can solve using flex and space between.

    div.second-col {
        width: 100%;
        padding: 30px !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

For div class="container" i think you can use article tag. The <article> tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

In your code you commented that picture tag doesn't work but looks like it is working, but i think you can delete source element with the mobile picture and switch src attribute of the img tag to mobile picture. With this way card will display mobile picture until min-width of 768px. In your code it displays desktop picture then switches to mobile at 320px then switches to the desktop again at 768px.

Also for this project i think only 1 media query is enough, which is i think needs to match with the picture elements min/max width size.

Lastly Kevin Powell made a video for this challenge. You can check that too.