diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx
index 680f8db90e..1ce818347f 100644
--- a/frontend/src/Editor/Container.jsx
+++ b/frontend/src/Editor/Container.jsx
@@ -8,7 +8,7 @@ import { componentTypes } from './Components/components';
 import { computeComponentName } from '@/_helpers/utils';
 
 const styles = {
-  width: 1290,
+  width: 1292,
   height: 1200,
   position: 'absolute'
 };
@@ -78,6 +78,8 @@ export const Container = ({
         let left = 0;
         let top = 0;
 
+        const canvasBoundingRect = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
+
         // Component already exists and this is just a reposition event
         if (id) {
           const delta = monitor.getDifferenceFromInitialOffset();
@@ -91,10 +93,8 @@ export const Container = ({
           componentData = JSON.parse(JSON.stringify(componentMeta));
           componentData.name = computeComponentName(componentData.component, boxes);
 
-          const canvasBoundingRect = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
           const offsetFromTopOfWindow = canvasBoundingRect.top;
           const offsetFromLeftOfWindow = canvasBoundingRect.left;
-
           const currentOffset = monitor.getSourceClientOffset();
 
           left = Math.round(currentOffset.x + (currentOffset.x * (1 - zoomLevel)) - offsetFromLeftOfWindow);
diff --git a/frontend/src/Editor/CustomDragLayer.jsx b/frontend/src/Editor/CustomDragLayer.jsx
index 2349700663..0dc28560fa 100644
--- a/frontend/src/Editor/CustomDragLayer.jsx
+++ b/frontend/src/Editor/CustomDragLayer.jsx
@@ -23,13 +23,17 @@ function getItemStyles(delta, item, initialOffset, currentOffset) {
 
   let id = item.id;
 
+  const canvasContainerBoundingRect = document.getElementsByClassName('canvas-container')[0].getBoundingClientRect();
+  const realCanvasBoundingRect = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
+
+  const realCanvasDelta = realCanvasBoundingRect.x - canvasContainerBoundingRect.x;
+
   if (id) { // Dragging within the canvas
     x = Math.round(item.left + delta.x);
     y = Math.round(item.top + delta.y);
   } else { // New component being dragged  from components sidebar
-    const canvasBoundingRect = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
-    const offsetFromTopOfWindow = canvasBoundingRect.top;
-    const offsetFromLeftOfWindow = canvasBoundingRect.left;
+    const offsetFromTopOfWindow = realCanvasBoundingRect.top;
+    const offsetFromLeftOfWindow = realCanvasBoundingRect.left;
     const zoomLevel = item.zoomLevel;
 
     x = Math.round(currentOffset.x + (currentOffset.x * (1 - zoomLevel)) - offsetFromLeftOfWindow);
@@ -38,6 +42,8 @@ function getItemStyles(delta, item, initialOffset, currentOffset) {
 
   [x, y] = snapToGrid(x, y);
 
+  x += realCanvasDelta;
+
   const transform = `translate(${x}px, ${y}px)`;
   return {
     transform,