diff --git a/scss/_modal.scss b/scss/_modal.scss
index bc349ff8e6..cc8d41ca1c 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -108,7 +108,7 @@
   .close {
     padding: $modal-header-padding;
     // auto on the left force icon to the right even when there is no .modal-title
-    margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;
+    margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
   }
 }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7b0d3a2f5a..9ac52e3d32 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -854,7 +854,9 @@ $modal-header-border-color:         $gray-200 !default;
 $modal-footer-border-color:         $modal-header-border-color !default;
 $modal-header-border-width:         $modal-content-border-width !default;
 $modal-footer-border-width:         $modal-header-border-width !default;
-$modal-header-padding:              1rem !default;
+$modal-header-padding-y:            1rem !default;
+$modal-header-padding-x:            1rem !default;
+$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
 
 $modal-xl:                          1140px !default;
 $modal-lg:                          800px !default;