How can I add a margin to an image in a div?-CodePudding

I've been trying to complete an HTML/CSS challenge from frontendmentor.io which wants me to create a layout for a QR code to be displayed.

Webpage Image

The above link shows an image of what my webpage looks like currently. I've added a margin to the image that's inside the white-colored div, but it seems to overflow the div on the bottom and right sides. Ideally, the image should resize with the margin to fit in my specified div width of 375px, but it's not doing that. How can I fix this?

The code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  <title>Frontend Mentor | QR code component</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet