diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index dd5addbf1e33611f5d711bfb3fd3a5e85752e759..085f951147f8ca3aac182955b3143432b57701fa 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -474,7 +474,7 @@ export default {
         <div
           v-if="showTreeList"
           :style="{ width: `${treeWidth}px` }"
-          class="diff-tree-list js-diff-tree-list mr-3"
+          class="diff-tree-list js-diff-tree-list px-3 pr-md-0"
         >
           <panel-resizer
             :size.sync="treeWidth"
@@ -487,7 +487,7 @@ export default {
           <tree-list :hide-file-stats="hideFileStats" />
         </div>
         <div
-          class="diff-files-holder"
+          class="col-12 col-md-auto diff-files-holder"
           :class="{
             [CENTERED_LIMITED_CONTAINER_CLASSES]: isLimitedContainer,
           }"
diff --git a/app/assets/javascripts/diffs/components/collapsed_files_warning.vue b/app/assets/javascripts/diffs/components/collapsed_files_warning.vue
index dded36431153c5585537a5f016cf26cbf8daf9c4..270bbfb99b72b51c19f8eeac48a2cbae8bd28453 100644
--- a/app/assets/javascripts/diffs/components/collapsed_files_warning.vue
+++ b/app/assets/javascripts/diffs/components/collapsed_files_warning.vue
@@ -50,7 +50,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="!isDismissed" data-testid="root" :class="containerClasses">
+  <div v-if="!isDismissed" data-testid="root" :class="containerClasses" class="col-12">
     <gl-alert
       :dismissible="true"
       :title="__('Some changes are not shown')"
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 8aaeb92eb7a98a583a04194ed0b7a5b0567e6173..ddec04b1b0c7aa577c7565c7a4eb8ac57f28abc7 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -770,8 +770,6 @@ $mr-widget-min-height: 69px;
     position: -webkit-sticky;
     position: sticky;
     top: $header-height + $mr-tabs-height;
-    margin-left: -16px;
-    width: calc(100% + 32px);
 
     .mr-version-menus-container {
       flex-wrap: nowrap;
@@ -868,6 +866,13 @@ $mr-widget-min-height: 69px;
   }
 }
 
+.container-fluid {
+  // Negative margins for mobile/tablet screen
+  .diffs.tab-pane {
+    margin: 0 (-$gl-padding);
+  }
+}
+
 // Wrap MR tabs/buttons so you don't have to scroll on desktop
 @include media-breakpoint-down(md) {
   .merge-request-tabs-container,
diff --git a/changelogs/unreleased/254197-merge-request-diff-has-an-extra-spacing-on-mobile.yml b/changelogs/unreleased/254197-merge-request-diff-has-an-extra-spacing-on-mobile.yml
new file mode 100644
index 0000000000000000000000000000000000000000..02cf7dbea4997f64d7f3fc4bba8c8b8fda45b9b7
--- /dev/null
+++ b/changelogs/unreleased/254197-merge-request-diff-has-an-extra-spacing-on-mobile.yml
@@ -0,0 +1,5 @@
+---
+title: Eliminate extra spacing on MR diffs from mobile/tablet screen
+merge_request: 42821
+author: Takuya Noguchi
+type: fixed
diff --git a/spec/frontend/diffs/components/collapsed_files_warning_spec.js b/spec/frontend/diffs/components/collapsed_files_warning_spec.js
index 670eab5472f95c5c7181414f939194d80dda77de..7bbffb7a1cd4ad8d7d657deb16b4327d088c7cbe 100644
--- a/spec/frontend/diffs/components/collapsed_files_warning_spec.js
+++ b/spec/frontend/diffs/components/collapsed_files_warning_spec.js
@@ -50,7 +50,7 @@ describe('CollapsedFilesWarning', () => {
     ({ limited, containerClasses }) => {
       createComponent({ limited });
 
-      expect(wrapper.classes()).toEqual(containerClasses);
+      expect(wrapper.classes()).toEqual(['col-12'].concat(containerClasses));
     },
   );