diff --git a/packages/editor/src/components/ScrollViewer.vue b/packages/editor/src/components/ScrollViewer.vue
index 2fd9226d..2c078861 100644
--- a/packages/editor/src/components/ScrollViewer.vue
+++ b/packages/editor/src/components/ScrollViewer.vue
@@ -57,6 +57,7 @@ export default defineComponent({
         width: ${props.width}px;
         height: ${props.height}px;
         position: absolute;
+        margin-top: 30px;
       `,
       ),
     };
diff --git a/packages/editor/src/layouts/NavMenu.vue b/packages/editor/src/layouts/NavMenu.vue
index c124f04b..48cf3a92 100644
--- a/packages/editor/src/layouts/NavMenu.vue
+++ b/packages/editor/src/layouts/NavMenu.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
-    <div v-for="key in keys" :class="`menu-${key}`" :key="key">
+    <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
       <tool-button :data="item" v-for="(item, index) in data[key]" :key="index"></tool-button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { computed, defineComponent, inject, PropType } from 'vue';
 
 import ToolButton from '@editor/components/ToolButton.vue';
-import { MenuBarData } from '@editor/type';
+import { GetColumnWidth, MenuBarData, Services } from '@editor/type';
 
 export default defineComponent({
   name: 'nav-menu',
@@ -29,8 +29,12 @@ export default defineComponent({
   },
 
   setup(props) {
+    const services = inject<Services>('services');
+
     return {
       keys: computed(() => Object.keys(props.data) as Array<keyof MenuBarData>),
+
+      columnWidth: computed(() => services?.uiService.get<GetColumnWidth>('columnWidth')),
     };
   },
 });
diff --git a/packages/editor/src/theme/nav-menu.scss b/packages/editor/src/theme/nav-menu.scss
index cdcf173b..880f14c0 100644
--- a/packages/editor/src/theme/nav-menu.scss
+++ b/packages/editor/src/theme/nav-menu.scss
@@ -21,12 +21,12 @@
     align-items: center;
   }
 
-  .menu-left {
-    padding-left: 16px;
+  .menu-center {
+    justify-content: center;
   }
 
   .menu-right {
-    padding-right: 16px;
+    justify-content: flex-end;
   }
 
   .menu-item {
diff --git a/packages/editor/src/theme/stage.scss b/packages/editor/src/theme/stage.scss
index f6ed2773..eab888a9 100644
--- a/packages/editor/src/theme/stage.scss
+++ b/packages/editor/src/theme/stage.scss
@@ -15,6 +15,7 @@
   position: relative;
   border: 1px solid $--border-color;
   transition: transform 0.3s;
+  box-sizing: content-box;
 
   &::-webkit-scrollbar {
     width: 0 !important;
diff --git a/packages/editor/src/utils/scroll-viewer.ts b/packages/editor/src/utils/scroll-viewer.ts
index 57963065..8f9a52cb 100644
--- a/packages/editor/src/utils/scroll-viewer.ts
+++ b/packages/editor/src/utils/scroll-viewer.ts
@@ -25,7 +25,8 @@ export class ScrollViewer {
       const { width, height } = contentRect;
       const targetRect = this.target.getBoundingClientRect();
       const targetWidth = targetRect.width * this.zoom;
-      const targetHeight = targetRect.height * this.zoom;
+      const targetMarginTop = Number(this.target.style.marginTop) || 0;
+      const targetHeight = (targetRect.height + targetMarginTop) * this.zoom;
 
       if (targetWidth < width) {
         (this.target as any)._left = 0;