问按钮未正确对齐

EN

我正在制作一份回复表格。我在添加替换现有输入字段的下拉列表时弄乱了UI，但它弄乱了我之前提供的UI，为了便于理解，我已经提供了after image。我已经添加了一个网站的下拉列表，我非常确定这是一个东西，这是混乱的UI。

简而言之，我想让接受和遗憾按钮并排出现在卡片的底部。

之前：

​

之后：

​

添加flex后：

有谁知道怎么解决这个问题吗。

​

.main_card {

宽度: 400px；

高度: 250px；

位置:绝对；

top: 50%；

左侧: 50%；

边界半径: 15px；

变换: translateY(-50%) translateX(-50%)；

背景颜色：#fff；

长方体阴影: 2px 2px 4px rgb(0，0，0，0.25)；

过渡:宽0.5s，高0.5s；

-webkit-过渡:宽0.5s，高0.5s；

填充: 0px 0px；

}

/这是用于按钮接受和后悔-->按钮/

#遗憾{

显示: flex；

}

按钮{

颜色：#ffff；

边界:无；

font-family："Raleway"；

font-size: 18px；

字体粗细: 600；

填充: 15px 32px；

宽度: 200px；

边距: 65px auto 0px auto；

大纲:无；

光标:指针；

}

button.regret {

边框-左下-半径: 15px；

背景颜色：#d5adb3；

}

button.accept {

边界-右下角-半径: 15px；

背景色：#c47c8e；

}

按钮:悬停{

背景颜色：#c2647b；

跃迁: 0.5s；

}

#开始:悬停{

背景颜色：#c2647b；

跃迁: 0.5s；

}

/这是veg veg或veg选项/

.wrapper {

高度: 35px；

宽度: 75%；

显示: inline-flex；

左: 0；

右: 0；

left-left:自动；

边距-右侧:自动；

位置:绝对；

边界半径: 5px；

}

.wrapper .option {

背景：#fff；

高度: 100%；

宽度: 100%；

显示: flex；

对齐项目:居中；

对齐-内容:空格-均匀；

边距:0 10px；

边界半径: 5px；

光标:指针；

填充:0 10px；

边框: 2px实心浅灰色；

过渡:所有0.3秒轻松；

}

.wrapper .option .dot {

高度: 20px；

宽度: 20px；

背景：#d9d9d9；

边界半径: 50%；

位置:相对；

}

.wrapper .option .dot::before {

位置:绝对；

内容：""；

顶部: 4px；

左图: 4px；

宽度: 12px；

高度: 12px；

背景:透明；

边界半径: 50%；

不透明度: 0；

变换:比例(1.5)；

过渡:所有0.3秒轻松；

}

Inputtype=“无线电”{

显示:无；

}

#option-1:选中:选中~.option-1{

边框颜色：#92282c；

背景：#92282c；

}

#option-2:选中:选中~.option-2{

边框颜色：#00c200；

背景：#00c200；

}

#option-1:已选中:已选中~.option-1 .dot，

#option-2:已选中:已选中~.option-2\f25 .dot {

背景：#fff；

}

#option-1:已选中:已选中~.option-1 .dot::before，

#option-2:已选中:已选中~.option-2\f25 .dot::before {

不透明度: 1；

变换:尺度(1)；

}

.wrapper .option跨度{

font-size: 15px；

颜色：#808080；

}

#option-1:选中:选中~.option-1 span，

#option-2:选中:选中~.option-2 span {

颜色：#fff；

}

/这是下拉列表开始的位置/

.select {

位置:相对；

宽度: 75%；

页边距: 25px auto 20px；

显示:块；

}

.select服务器{

位置:绝对；

右: 12px；

顶部: calc(50% - 3px)；

宽度: 10px；

高度: 6px；

笔划宽度: 2px；

笔划：#9098a9；

fill:无；

笔划-线帽:圆形；

笔划-线条连接:圆形；

指针事件:无；

}

.select选择{

-webkit-外观:无；

填充: 7px 7px 7px 12px；

宽度: 100%；

边框: 1px实体#e8eaed；

边界半径: 5px；

背景：#fff；

长方体阴影:0 1px 3px -2px #9098a9；

光标:指针；

font-family:继承；

font-size: 16px；

过渡:所有150毫秒轻松；

}

.select select:必需:无效{

颜色：#5a667f；

}

.select选择选项{

颜色：#223254；

}

.select选择optionvalue="“{

显示:无；

}

<h1 class="h1 text">RSVP</h1>

<h2 class="h2 text">for the wedding of</h2>

<h1 class="h1 cursive">Tippu and Ihsana</h1>

<p class="line p">________________________________________</p>

<h2 class="h2 text"><b>Date and Time</b></h2>

<p class="p text">Thursday, October 21, 2021</p>

<p class="p text">7:00 PM</p>

<h2 class="h2 text">Nikkah followed by Dinner <br><b>Venue</b></h2>

<p class="p text">New College Auditorium,</p>

<p class="p text">Peters road, Royapettah, Chennai</p>

<p class="line p">________________________________________</p>

<input id="namefield" type="text" placeholder="Name" required>

<label class="select" for="slct"><select id="slct" required="required">

      <option value="" disabled="disabled" selected="selected">Select option</option>

      <option value="1">One</option>

      <option value="2">Two</option>

      <option value="3">Three</option>

      <option value="4">Four</option>

      <option value="5">Five</option>

      <option value="6">Six</option>

      <option value="More">More</option>

  </select><svg>

      <use xlink:href="#select-arrow-down"></use>

  </svg></label>

<div class="wrapper">

  <input type="radio" name="select" id="option-1" value="non-veg">

  <input type="radio" name="select" id="option-2" value="veg">

  <label for="option-1" class="option option-1">

        <div class="dot"></div>

         <span>Non-Veg</span>

         </label>

  <label for="option-2" class="option option-2">

        <div class="dot"></div>

         <span>Veg</span>

      </label>

</div>

<div id="regret">

<button class ="regret" onclick="Regret();">Regret</button>

<button class ="accept" onclick="WriteData();">Accept</button>

  <polyline points="1 1 5 5 9 1"></polyline>

​