HTML CSS

Hi Muriel, great job!

I have a couple of suggestions: consider removing the black border from the "Add to Cart" button and using more semantic HTML elements to improve readability.

Everything looks good and very similar to design. One thing I noticed is that if you open the site in a windowed mode (in desktop size) and play around with the window sizes, the container for your content doesn't stay in the middle. This is because you set:

    margin: auto;
    margin-top: 60px;

This makes your left margin also 60px. This means that your image can slightly move but as soon as the margin hits it will no longer move. So if I open your site with a half open browser, the image will be half out of view.

The way I would solve this issue is add margin only for the mobile view but as you can center the container using flexbox - you do not need a margin for the desktop version as all the content is already centered:

    display:flex;
    justify-content: center;
    align-items: center;