按键仅部分地点击错误(Button only partially clickable error)

我有一个很奇怪的错误，我想不通为什么按钮无法点击该按钮的整个“红色区域”。

以下附件是发生了什么图像。

当我移动到d字符发送它立即变得不可点击。为此事到d字的右边的一切无法点击无论是在整个红色的空间。

整个表格的HTML如下。这是使用阵营完成的，所以我包括代码以防万一它是出于某种原因有关。

import React, { Component } from 'react';
import { FormGroup, FormControl, Button } from "react-bootstrap";
import MaskedFormControl from 'react-bootstrap-maskedinput'

export default class defaultHomeForm extends Component {

    render(){
      return(
        <form onSubmit={this.props.handleSubmit}>
          <FormGroup
            controlId="formName"
            validationState={this.props.formValidation("name")}
            className="quote-fields"
          >
              <FormControl
                type="text"
                name="name"
                placeholder="Name"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <FormGroup
            controlId="formPhone"
            validationState={this.props.formValidation("phone")}
            className="quote-fields"
          >
              <MaskedFormControl
                type='text'
                name='phone'
                mask='(111)-111-1111 x11111'
                placeholder="Phone"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <FormGroup
            controlId="formEmail"
            validationState={this.props.formValidation("email")}
            className="quote-fields"
          >
              <FormControl
                type="email"
                name="email"
                placeholder="Email"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <FormGroup
            controlId="formAddress"
            validationState={this.props.formValidation("address")}
            className="quote-fields"
          >
              <FormControl
                type="text"
                name="address"
                placeholder="Address"
                className="form-field"
                onChange={this.props.setProperty}
              />
              <FormControl.Feedback />
          </FormGroup>
          <div className="send-btn"><Button type="submit"><div className="send-btn-text">Send <i className="fa fa-angle-right"></i><i className="fa fa-angle-right"></i></div></Button></div>
        </form>
    );
  }
}

显然，CSS是寻找这些错误 ，所以我重视的是与此有关我的SCSS文件的一部分首位。

%send-btn {
    padding: 5px;
    .send-btn-text{
      background-color:red;
    }
    .btn {
        background: transparent;
        border: none;
        font-size: 25px;
        font-weight: 500;
        color: #fff;
        text-transform: uppercase;
        display: flex;
        align-items: center;

        &:hover{
            color: #1899d1;
        }
        i {
            &:first-child {
                padding-left: 5px;
            }
        }

    }
}

%quote-fields {
    padding: 0px 15px 10px;
    margin: 0px;

    .form-field {
        background: transparent;
        padding: 12px;
        height: 43px;
        margin-bottom: 12px;
        color: #ffffff;
        border-radius: 2px;
        border: 1px solid #dcdcdc78;
    }
}

如果我错过了任何其他SCSS / CSS，你需要看到，让我知道，我会上传的时候了。

事情我已经尝试：

我试图改变显示器inline-block的，而不是弯曲 ，没有工作。 我曾尝试添加一个宽度控制 ，仍然没有去。

我不知道是什么原因造成这种奇怪的效果。任何想法，欢迎和我会尝试他们的时候了。

我也曾尝试与检查人员搞乱只是更改动态（实时）的CSS属性，看看我是否能得到区域点击不知何故，仍然没有运气。

我要提到我使用谷歌的Chrome版本67.0.3396.87在Mac上测试

附件是从表示DIV理论上应该是蛮好的检查者的图像。