diff --git a/components/steps/__tests__/__snapshots__/demo.test.js.snap b/components/steps/__tests__/__snapshots__/demo.test.js.snap
index 74eb8fd2da..9864dc41aa 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.js.snap
@@ -2794,6 +2794,274 @@ Array [
 ]
 `;
 
+exports[`renders ./components/steps/demo/steps-in-steps.md correctly 1`] = `
+Array [
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+    style="margin-bottom:16px"
+  >
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="small"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Small
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked"
+    >
+      <span
+        class="ant-radio ant-radio-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-input"
+          type="radio"
+          value="default"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Default
+      </span>
+    </label>
+  </div>,
+  <div
+    class="ant-steps ant-steps-vertical ant-steps-default"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            1
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            <div
+              class="ant-card ant-card-bordered"
+            >
+              <div
+                class="ant-card-body"
+              >
+                <div
+                  class="ant-steps ant-steps-horizontal ant-steps-default ant-steps-label-horizontal"
+                >
+                  <div
+                    class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+                  >
+                    <div
+                      class="ant-steps-item-container"
+                    >
+                      <div
+                        class="ant-steps-item-tail"
+                      />
+                      <div
+                        class="ant-steps-item-icon"
+                      >
+                        <span
+                          class="ant-steps-icon"
+                        >
+                          1
+                        </span>
+                      </div>
+                      <div
+                        class="ant-steps-item-content"
+                      >
+                        <div
+                          class="ant-steps-item-title"
+                        >
+                          Finished
+                        </div>
+                        <div
+                          class="ant-steps-item-description"
+                        >
+                          This is a description.
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-steps-item ant-steps-item-wait"
+                  >
+                    <div
+                      class="ant-steps-item-container"
+                    >
+                      <div
+                        class="ant-steps-item-tail"
+                      />
+                      <div
+                        class="ant-steps-item-icon"
+                      >
+                        <span
+                          class="ant-steps-icon"
+                        >
+                          2
+                        </span>
+                      </div>
+                      <div
+                        class="ant-steps-item-content"
+                      >
+                        <div
+                          class="ant-steps-item-title"
+                        >
+                          In Progress
+                        </div>
+                        <div
+                          class="ant-steps-item-description"
+                        >
+                          This is a description.
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="ant-steps-item ant-steps-item-wait"
+                  >
+                    <div
+                      class="ant-steps-item-container"
+                    >
+                      <div
+                        class="ant-steps-item-tail"
+                      />
+                      <div
+                        class="ant-steps-item-icon"
+                      >
+                        <span
+                          class="ant-steps-icon"
+                        >
+                          3
+                        </span>
+                      </div>
+                      <div
+                        class="ant-steps-item-content"
+                      >
+                        <div
+                          class="ant-steps-item-title"
+                        >
+                          Waiting
+                        </div>
+                        <div
+                          class="ant-steps-item-description"
+                        >
+                          This is a description.
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            2
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            In Progress
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            3
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Waiting
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders ./components/steps/demo/vertical.md correctly 1`] = `
 <div
   class="ant-steps ant-steps-vertical"
diff --git a/components/steps/demo/steps-in-steps.md b/components/steps/demo/steps-in-steps.md
new file mode 100644
index 0000000000..db91847d0a
--- /dev/null
+++ b/components/steps/demo/steps-in-steps.md
@@ -0,0 +1,54 @@
+---
+order: 99
+debug: true
+title:
+  zh-CN: Steps 嵌套 Steps
+  en-US: Steps inside Steps
+---
+
+## zh-CN
+
+测试 Steps 嵌套 Steps 的样式。
+
+## en-US
+
+Test style of Steps inside Steps.
+
+```jsx
+import React, { useState } from 'react';
+import { Steps, Radio, Card } from 'antd';
+
+const { Step } = Steps;
+
+const App = () => {
+  const [size, setSize] = useState('default');
+  const horizontalSteps = (
+    <Card>
+      <Steps size={size}>
+        <Step title="Finished" description="This is a description." />
+        <Step title="In Progress" description="This is a description." />
+        <Step title="Waiting" description="This is a description." />
+      </Steps>
+    </Card>
+  );
+  return (
+    <>
+      <Radio.Group
+        style={{ marginBottom: 16 }}
+        value={size}
+        onChange={e => setSize(e.target.value)}
+      >
+        <Radio value="small">Small</Radio>
+        <Radio value="default">Default</Radio>
+      </Radio.Group>
+      <Steps size={size} direction="vertical">
+        <Step title="Finished" description={horizontalSteps} />
+        <Step title="In Progress" description="This is a description." />
+        <Step title="Waiting" description="This is a description." />
+      </Steps>
+    </>
+  );
+};
+
+ReactDOM.render(<App />, mountNode);
+```
diff --git a/components/steps/style/index.less b/components/steps/style/index.less
index 6ce2f0ed99..f82359952c 100644
--- a/components/steps/style/index.less
+++ b/components/steps/style/index.less
@@ -41,7 +41,7 @@
   }
 
   &:last-child {
-    flex: none;
+    flex: none !important;
   }
 
   &:last-child > &-container > &-tail,
@@ -123,13 +123,13 @@
   }
   .step-item-status(wait);
   .step-item-status(process);
-  &-process &-icon {
+  &-process > &-container > &-icon {
     background: @process-icon-color;
     .@{steps-prefix-cls}-icon {
       color: @process-icon-text-color;
     }
   }
-  &-process &-title {
+  &-process > &-container > &-title {
     font-weight: 500;
   }
   .step-item-status(finish);
diff --git a/components/steps/style/rtl.less b/components/steps/style/rtl.less
index 3b3aa5036b..11daa06c3d 100644
--- a/components/steps/style/rtl.less
+++ b/components/steps/style/rtl.less
@@ -137,10 +137,6 @@
 // vertical
 .steps-vertical() {
   .@{steps-prefix-cls}-item {
-    .@{steps-prefix-cls}-rtl& {
-      padding-right: 0 !important;
-    }
-
     &-icon {
       .@{steps-prefix-cls}-rtl& {
         float: right;
@@ -251,3 +247,12 @@
     }
   }
 }
+
+@media (max-width: @screen-xs) {
+  .@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
+    // https://github.com/ant-design/ant-design/issues/27498
+    .@{steps-prefix-cls}-item {
+      padding-right: 0 !important;
+    }
+  }
+}
diff --git a/components/steps/style/vertical.less b/components/steps/style/vertical.less
index 2c04dc4391..fec744b46c 100644
--- a/components/steps/style/vertical.less
+++ b/components/steps/style/vertical.less
@@ -4,7 +4,7 @@
   .@{steps-prefix-cls}-item {
     display: block;
     flex: 1 0 auto;
-    padding-left: 0 !important;
+    padding-left: 0;
     overflow: visible;
 
     &-icon {
@@ -75,5 +75,10 @@
 @media (max-width: @screen-xs) {
   .@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
     .steps-vertical;
+
+    // https://github.com/ant-design/ant-design/issues/27498
+    .@{steps-prefix-cls}-item {
+      padding-left: 0 !important;
+    }
   }
 }