I'm designing a Google Chrome extension. It is designed to insert an image into text. It currently does so, but the image attached at the bottom shows my problem. The image displays over text, and I was wondering if there was a way to make the image have its own separate space, as if I was using margin - so the snake is to the left of the logo and all of the links, and everything else on the page is shifted to the right slightly. Neither marginLeft nor marginRight work, though. This is my code:

popup.js:

  function imageappend() {
    const img = document.createElement("img");
    img.src = chrome.runtime.getURL("imageedit_1_3932659157.png");
    img.style.position = "fixed";
    img.style.top = "0";
    img.style.left = "0";
    img.style.padding = "0";
    img.style.marginRight = "7%";
    img.style.marginLeft = "0";
    img.style.marginBottom = "0";
    img.style.marginTop = "0";
    img.style.width = "5%";
    document.body.appendChild(img);
  }

  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: imageappend
  });
})();