diff --git a/scss/boost_union/post.scss b/scss/boost_union/post.scss
index 90a1b56a0f3..26aafce64c4 100644
--- a/scss/boost_union/post.scss
+++ b/scss/boost_union/post.scss
@@ -750,8 +750,18 @@ body.theme-boost-union-commincourse {
         .main-inner-outside-left-right,
         .main-inner-outside-left,
         .main-inner-outside-right {
-            /* Center the main region content to keep the page content in the middle of the page. */
-            text-align: center;
+            &.main-inner-outside-nearwindowedges {
+                /* Center the main region content to position the page content in the middle of the page,
+                and place the left and right block regions near the window edges. */
+                width: 100%;
+                display: flex;
+            }
+            &.main-inner-outside-nextmaincontent {
+                /* Center the main region content to keep the left and right block regions near the main region,
+                positioning the page content in the middle of the page. */
+                display: flex;
+                align-self: center;
+            }
 
             /* Change the block regions to show them properly as block columns. */
             #theme-block-region-outside-left,
@@ -759,12 +769,6 @@ body.theme-boost-union-commincourse {
             .main-inner {
                 /* Undo the text-align for the regions in each column to still show the content correctly. */
                 text-align: initial;
-
-                /* Display them as inline-block. */
-                display: inline-block;
-
-                /* And make sure that the columns are at the top of the page at all. */
-                vertical-align: top;
             }
         }
 
@@ -786,66 +790,101 @@ body.theme-boost-union-commincourse {
             width: calc(98% - #{$blockregionoutsiderightwidth} - #{$blockregionoutsideleftwidth});
         }
 
-        /* Set the width and margin of the outside-left region. */
-        #theme-block-region-outside-left {
-            margin-right: 1rem;
-            margin-top: 1.5rem;
-            width: $blockregionoutsideleftwidth;
+		/* Using 100% of width in the main inner push the side rigions outside the page */
+        #page .main-inner-outside-left-right .main-inner,
+        #page .main-inner-outside-left .main-inner,
+        #page .main-inner-outside-right .main-inner {
+            width: auto;
         }
+    }
+}
 
-        /* Set the width of the outside-right region. */
-        #theme-block-region-outside-right {
-            margin-left: 1rem;
-            margin-top: 1.5rem;
-            width: $blockregionoutsiderightwidth;
-        }
+/* On larger screens. */
+@include media-breakpoint-up(lg) {
+    /* Set the width and margin of the outside-left region. */
+    #theme-block-region-outside-left {
+        margin-right: 1rem;
+        margin-top: 1.5rem;
+        width: $blockregionoutsideleftwidth;
+    }
 
-        /* If the admin configured outside blocks to be shown next to the main content. */
-        .main-inner-outside-nextmaincontent {
-            #theme-block-region-outside-left,
-            #theme-block-region-outside-right {
-                /* Disable float (just to be sure). */
-                float: none;
-            }
-        }
+    /* Set the width of the outside-right region. */
+    #theme-block-region-outside-right {
+        margin-left: 1rem;
+        margin-top: 1.5rem;
+        width: $blockregionoutsiderightwidth;
+    }
+}
 
-        /* If the admin configured outside blocks to be shown next to the main content. */
-        .main-inner-outside-nearwindowedges {
-            /* Float the outside-left block region to the left. */
-            #theme-block-region-outside-left {
-                float: left;
-            }
+/* On larger screen. */
+@include media-breakpoint-up(lg) {
+    /* Set the width of the main region content to 50%, allowing the left and right block regions to have a wider width */
+    body.limitedwidth #page.drawers .main-inner-wrapper .main-inner {
+        flex: auto;
+    }
+}
 
-            /* Float the outside-right block region to the right. */
-            #theme-block-region-outside-right {
-                float: right;
-            }
+/* On larger screen. */
+@include media-breakpoint-only(lg) {
+    /* Reduced the left region block to maximum width, so the center main content & right block region
+    align nearer to the left block region */
+    #theme-block-region-outside-left,
+    #theme-block-region-outside-right {
+        max-width: 300px;
+    }
 
-            /* Clear the outside-bottom + footer regions so that they are shown correctly after the floated regions. */
-            #theme-block-region-outside-bottom,
-            #theme-block-region-footer {
-                clear: both;
-            }
-        }
+    /* Use possible width for the main content */
+    body.limitedwidth #page .main-inner-outside-left-right .main-inner,
+    body.limitedwidth #page .main-inner-outside-left .main-inner,
+    body.limitedwidth #page .main-inner-outside-right .main-inner {
+        width: 100%;
     }
 }
 
-/* And on smaller screens. */
-@include media-breakpoint-down(sm) {
-    /* Change the outside-left and outside-right blocks to full width (with some horizontal space). */
+/* On larger screen. */
+@include media-breakpoint-only(md) {
+    /* Center the main region content while maintaining full width for the left and right block regions,
+    thereby positioning the page content in the middle of the page. */
+    body.limitedwidth {
+        .main-inner-outside-left-right.main-inner-outside-nextmaincontent,
+        .main-inner-outside-left.main-inner-outside-nextmaincontent,
+        .main-inner-outside-right.main-inner-outside-nextmaincontent {
+            display: block;
+            align-self: auto;
+        }
+    }
+    /* Change the outside-left and outside-right blocks to full width (with some horizontal space) */
     #theme-block-region-outside-left,
     #theme-block-region-outside-right {
-        padding-left: 15px;
-        padding-right: 15px;
         width: 100%;
     }
-    /* And remove their floating. */
-    .main-inner-outside-nearwindowedges {
-        #theme-block-region-outside-left,
-        #theme-block-region-outside-right {
-            float: none;
+}
+
+/* And on smaller screens. */
+@include media-breakpoint-down(md) {
+    /* Set the width of the main region content, the left and right block regions to have a full width */
+    body.limitedwidth {
+        .main-inner-outside-left-right.main-inner-outside-nearwindowedges,
+        .main-inner-outside-left.main-inner-outside-nearwindowedges,
+        .main-inner-outside-right.main-inner-outside-nearwindowedges {
+            flex-direction: column;
+            align-items: center;
         }
     }
+    /* Removed the padding on left and right side of the main region content */
+    body.limitedwidth #page.drawers .main-inner-wrapper .main-inner {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+/* And on smaller screens. */
+@include media-breakpoint-down(sm) {
+    /* Padding has been added to the center region block, which contains the left and right regions,
+    as well as the main content region, to create space between the main content and the window screen. */
+    body.limitedwidth #page.drawers .main-inner-wrapper {
+        padding: 0 15px;
+    }
 }
 
 
@@ -895,7 +934,7 @@ body.theme-boost-union-commincourse {
 }
 
 /* Additional styling for content width regions to limit the block region size on Moodle pages with limited width. */
-body.limitedwidth .theme-block-region-outside-coursecontentwidth,
+body.limitedwidth #theme-block-region-outside-top.theme-block-region-outside-coursecontentwidth,
 body.limitedwidth .theme-block-region-footer-coursecontentwidth {
     max-width: $course-content-maxwidth;
 }
diff --git a/tests/behat/theme_boost_union_feelsettings_blocks.feature b/tests/behat/theme_boost_union_feelsettings_blocks.feature
index df420de0534..226dbd6d85f 100644
--- a/tests/behat/theme_boost_union_feelsettings_blocks.feature
+++ b/tests/behat/theme_boost_union_feelsettings_blocks.feature
@@ -409,6 +409,7 @@ Feature: Configuring the theme_boost_union plugin for the "Blocks" tab on the "F
       | <config>              | <settingvalue> | theme_boost_union |
     And the theme cache is purged and the theme is reloaded
     When I log in as "admin"
+    And I change window size to "large"
     And I am on "Course 1" course homepage
     And I turn editing mode on
     And I should see "Add a block" in the "#theme-block-region-<region>" "css_element"
diff --git a/version.php b/version.php
index b395416e939..2872aa17ff3 100644
--- a/version.php
+++ b/version.php
@@ -25,7 +25,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $plugin->component = 'theme_boost_union';
-$plugin->version = 2023102035;
+$plugin->version = 2023102036;
 $plugin->release = 'v4.3-r12';
 $plugin->requires = 2023100900;
 $plugin->supported = [403, 403];