diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
index df46fc9c6..c34f8f5b2 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
@@ -224,6 +224,17 @@ export const drawTasks = function (diagram, tasks, verticalPos) {
       num = sectionNumber % fills.length;
       colour = textColours[sectionNumber % textColours.length];
 
+      // count how many consecutive tasks have the same section
+      let taskInSectionCount = 0;
+      const currentSection = task.section;
+      for (let taskIndex = i; taskIndex < tasks.length; taskIndex++) {
+        if (tasks[taskIndex].section == currentSection) {
+          taskInSectionCount = taskInSectionCount + 1;
+        } else {
+          break;
+        }
+      }
+
       const section = {
         x: i * conf.taskMargin + i * conf.width + LEFT_MARGIN,
         y: 50,
@@ -231,6 +242,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) {
         fill,
         num,
         colour,
+        taskCount: taskInSectionCount,
       };
 
       svgDraw.drawSection(diagram, section, conf);
diff --git a/packages/mermaid/src/diagrams/user-journey/svgDraw.js b/packages/mermaid/src/diagrams/user-journey/svgDraw.js
index 74d5d2a02..f6dbe71e1 100644
--- a/packages/mermaid/src/diagrams/user-journey/svgDraw.js
+++ b/packages/mermaid/src/diagrams/user-journey/svgDraw.js
@@ -196,7 +196,10 @@ export const drawSection = function (elem, section, conf) {
   rect.x = section.x;
   rect.y = section.y;
   rect.fill = section.fill;
-  rect.width = conf.width;
+  // section width covers all nested tasks
+  rect.width =
+    conf.width * section.taskCount + // width of the tasks
+    conf.diagramMarginX * (section.taskCount - 1); // width of space between tasks
   rect.height = conf.height;
   rect.class = 'journey-section section-type-' + section.num;
   rect.rx = 3;