VUE3 + ElementUI Plus 页面显示不正常

在使用elementui + vue3练习时，页面尺寸总是不正确，vue3 项目是直接使用webstorm上创建的。依赖包如下：

"dependencies": {
  "axios": "^1.7.9",
  "element-plus": "^2.9.1",
  "vue": "^3.5.13",
  "vue-router": "^4.5.0"
}

在浏览器百分之百显示下：

希望大佬能看看，指点一下， 本人新手小白在上面栽了几天

对应页面代码：

<script setup>
import { reactive, ref } from 'vue'

const user = reactive(JSON.parse(window.sessionStorage.getItem('user')));

</script>

<template>
  <el-container>
    <el-header class="homeHeader">
      <div>Header</div>
      <el-dropdown>
        <span class="el-dropdown-link">
          下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item disabled>双皮奶</el-dropdown-item>
          <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <el-main>Main</el-main>
  </el-container>
</template>

<style>
.homeHeader {
  width: 100%; /* 宽度填满整个屏幕 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #fbc2eb, #a6c1ee);
  margin: 0; /* 去除默认边距 */
}


.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}

</style>