I want this label to align with my title, but I find it hard to do

<template> <el-form :rules="formRules" ref="searchCriteria" :model="searchCriteria" label-width="100px" class="formStyle"> <div> <h1>Arrival Port Reliability</h1> </div> <el-form-item label="Actual Month: " prop="month"> <el-date-picker v-model="searchCriteria.month" type="month" format="yyyyMM" default-time value-format="yyyyMM" placeholder="Actual Month" :editable="false" :picker-options="pickerOptions0"> </el-date-picker> </el-form-item> <el-button type="primary" round @click="download" :disabled="disableDownload" :loading="isLoading" class="searchStyle"> Download </el-button> </el-form> </template>

return { disableDownload: false, isLoading: false, searchCriteria: { month: '', }, pickerOptions0: { disabledDate (time) { const oneDay = 3600 * 1000 * 24; return time.getTime() > (Date.now() + oneDay) || time.getTime() < (Date.now() - oneDay * 30 * 11); } }, formRules: { month: [{ required: true, message: "please pick month", trigger: "blur" }] } }

<style scoped> .formStyle{ margin-left: 50px; } .searchStyle{ margin-left: 70px; } </style>

My style is very simple. I checked the document and found no operation on label in the official example, so normally adding the label-width should automatically align.But why not me