diff --git a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
index 5b4acce9381a5..2059286e2792f 100644
--- a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
+++ b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
@@ -3,7 +3,7 @@
 exports[`it handles goofy nesting properly 1`] = `
 "<span
     class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"
@@ -24,7 +24,7 @@ exports[`it handles goofy nesting properly 1`] = `
 exports[`it leaves images that are already linked alone 1`] = `
 "<span
     class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"
@@ -44,7 +44,7 @@ exports[`it leaves images that are already linked alone 1`] = `
 
 exports[`it leaves linked HTML img tags alone 1`] = `
 "<a href=\\"https://example.org\\">
-  <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\">
+  <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\">
     <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
     <img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"this image already has a link\\" title=\\"\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
   </span>
@@ -52,7 +52,7 @@ exports[`it leaves linked HTML img tags alone 1`] = `
 `;
 
 exports[`it leaves single-line linked HTML img tags alone 1`] = `
-"<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\">
+"<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\">
     <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
     <img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"this image already has a link\\" title=\\"\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
   </span>"
@@ -60,7 +60,7 @@ exports[`it leaves single-line linked HTML img tags alone 1`] = `
 
 exports[`it transforms HTML img tags 1`] = `
 "<a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
-    <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\">
+    <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\">
     <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
     <img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"my image\\" title=\\"\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
   </span>
@@ -69,7 +69,7 @@ exports[`it transforms HTML img tags 1`] = `
 
 exports[`it transforms HTML img tags with query strings 1`] = `
 "<a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
-    <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\">
+    <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\">
     <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
     <img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"my image\\" title=\\"\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
   </span>
@@ -86,7 +86,7 @@ exports[`it transforms image references in markdown 1`] = `
   >
     <span
     class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"
@@ -115,7 +115,7 @@ exports[`it transforms images in markdown 1`] = `
   >
     <span
     class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"
@@ -144,7 +144,7 @@ exports[`it transforms images in markdown with query strings 1`] = `
   >
     <span
     class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"
@@ -173,7 +173,7 @@ exports[`it uses tracedSVG placeholder when enabled 1`] = `
   >
     <span
     class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"
diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js
index e12de2a0888cf..da9c7e5f42b6d 100644
--- a/packages/gatsby-remark-images/src/index.js
+++ b/packages/gatsby-remark-images/src/index.js
@@ -245,9 +245,9 @@ module.exports = (
     let rawHTML = `
   <span
     class="${imageWrapperClass}"
-    style="position: relative; display: block; ${
+    style="position: relative; display: block; margin-left: auto; margin-right: auto; ${
       showCaptions ? `` : wrapperStyle
-    } max-width: ${presentationWidth}px; margin-left: auto; margin-right: auto;"
+    } max-width: ${presentationWidth}px;"
   >
     <span
       class="${imageBackgroundClass}"