header和footer宽度不能撑满整行的问题

[schunlee]

按element-plus布局，header和footer内部的元素总是不能撑满整行，左右和屏幕之间有间距
我的代码：

// Home.vue
    <template>
      <el-container>
        <el-header>
          <Header />
        </el-header>
        <el-main>
          <CreateRepo/>
        </el-main>
        <el-footer>
          <Footer />
        </el-footer>
      </el-container>
    </template>

// Header.vue
  <el-row type="flex">
    <el-col>
      <h2 class="caption">Github Manager</h2>
    </el-col>
  </el-row>
  <el-row>
    <el-col>
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
        background-color="#e3f2fd"
        text-color="#409EFF"
        active-text-color="#409EFF"
        router
      >
        <el-menu-item index="/">
          Create Repository
        </el-menu-item>
        <el-menu-item index="/share">
          Share Repository
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

// Footer.vue
<template>
  <el-row type="flex">
    <el-col :span="24">
      <div id="footer">
        <p style="color:#409EFF;padding-top:20px;">test @ {{ year }}</p>
      </div>
    </el-col>
  </el-row>
  <el-backtop></el-backtop>
</template>

效果图：
https://i.imgur.com/3gmKZtU.png