Using CSS Variables

Hello @breteo. Welcome to Frontend Mentor Community 🎉!!!

I have few suggestions to improve your solution.

HTML 📃:

• Every website should have at least one landmark like a <main> tag so you can wrap all the content in a <main> tag

HEADING TAGS

• Every website should have one heading tag like a <h1>
• Add this code: <h1>Improve your front-end skills by building projects<h1>

CSS 🎨:

• You need to add CSS Reset to your stylesheet

Here are few CSS Reset you might want to check out:

• Andy Bell Modern CSS Reset
• Josh Comeau CSS Reset

To fix your issue, you can remove the default margin and padding using the * selector

*{
  margin: 0;
  padding: 0;
 box-sizing: border-box
}

Box sizing

On your container class you need to remove a few styles and some new ones

• margin: 0 auto; and margin-inline: auto do the same thing so you can remove whichever one you want
• Add a max-width so your card won't stretch the whole width of the page

.container {
    background-color: #fff;
    border-radius: 17px;
    margin: 0 auto;
    margin-inline: auto;
}

.container{
    background-color: #fff;
    border-radius: 17px;
    max-width: /*whatever value you want */ 
   margin-inline: auto;
}

Here is my solution to this challenge qr code component in case you want to look at it

Hopes this help you and don't hesitate to reach out to me if you have any questions

In my qr code, a padding on "imgBox" and a side margin on "p1" worked fine.

Try using margin-left, margin right. Not sure if that's the answer you're looking for, since I see js files and variables in your github page for this project. Either way good luck, I find this challenge more about the css, it's an interesting take to use JS.