Html 引导：使用自定义电子邮件表单在x上溢出（右侧的白色条）

我正试图让我的引导登录页面对所有显示都有响应，因此我开始使用媒体查询来适应iPhone、iPad和其他设备上的页面，在一位用户建议我使用

overflow-x:hidden

但是在另一个组件上，我用css创建了一个自定义登录表单，并且在页面的右侧（白色条）出现了溢出，即使我更改了权重以修复它。
overflow-x:hidden在这里不起作用。我会给你看我的密码，希望有人能帮我<我需要帮助。我是新的前端开发人员，所以不要想给我一些建议

<div id="signUpPageP" class="signUpPageP full-height p-4">
        <div class="row ">
            <div class="col-lg " style="overflow-x: hidden;">
        <div class="myform float-left" >
              <h2>Join Now!</h2>
              <form @submit.prevent="addEmail(email,name)">
                <div class="form-group">
                  <label for="emailSignup">Coming soon</label>
                  <input v-model="email"
                         type="email"
                         id="emailSignup"
                         placeholder="......."
                         class="form-control"
                  >
                  <input v-model="name"
                         type="name"
                         id="nameSignup"
                         placeholder="......."
                         class="form-control"
                  >
                  <input type="radio" name="privacy" id="privacy" required> <a href="#" data-toggle="modal" data-target="#exampleModalLong" target="_blank" class="text-warning">Privacy Policy</a> 

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Privacy Policy</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        blablablbalbablabla
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

                  
                  <small id="emailHelp" class="form-text text-muted"> we'll not share your mail</small>
                  <button type="submit" class="btn btn-success mt-3 btn-custom">Sign In</button>
                  <div class="mt-4">
                    <p class="m-0">{{ message }}</p>
                  </div>
                </div>
              </form>
            </div>

<style scoped>
  #signUpPageP {
    background-color: white;
    overflow-x: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  .navbar-custom { 
            background-color:  #ff9e0b; 
        } 
        /* Modify brand and text color */ 
          
        .navbar-custom .navbar-brand, 
        .navbar-custom .navbar-text { 
            color: white !important;
            font-size: 1.5em !important; 
        }

  .text-color{
      color:white;
      font-family: 'Mountserrat',sans-serif;
      font-weight: 600;
  }
  .text-color-about{
      color:#ff9e0b;
      font-family: 'Mountserrat',sans-serif;
      font-weight: 600;
  }
  .text-color-about_p{
      color:#ff9e0b;
      font-family: 'Mountserrat',sans-serif;
      font-weight: 800;
      font-size: 4em !important;
  }
  .text-color-about_s{
      color:#ff9e0b;
      font-family: 'Mountserrat',sans-serif;
      font-weight: 800;
      font-size: 3em !important;
  }
  .text-color-about_m{
      color: white;
      font-family: 'Mountserrat',sans-serif;
      font-weight: 600;
      font-size: 3em !important;
  }
  .text-color-about_b{
      color:white;
      font-family: 'Mountserrat',sans-serif;
      align-self: center;
      font-weight: 800;
      font-size: 2em !important;
  }
  .text-color-about_sn{
      color:#ff9e0b;
      font-family: 'Mountserrat',sans-serif;
      align-self: center;
      font-weight: 800;
      font-size: 1em !important;
  }
  .bg-primary{
      color:#ff9e0b;
  }
  .bg-imgPlayer{
      contain: url(../assets/store-02.png);
      
  }
  
  .btn-custom{
     
      background-color: #ff9e0b !important;
  }
  .myform{
        position: relative;
        display: -ms-flexbox;
        display: flex;
        padding: 6rem;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 70%;
        height: 130%;
        pointer-events: auto;
        background-color: #fff;
        background-clip: padding-box;
        border: 8px solid#ff9e0b;
        border-radius: 1.1rem;
        outline: 0;
        max-width: 500px;
         }
 
     .btn-custom{
      border-radius: 1rem;
      background-color: #ff9e0b !important;
  }
 

@media (max-width: 375px) { 
.navbar-custom {
         width: 375px;
         overflow-x: hidden;
        
}
.myform {
          width:330px; /* .... */
          height: 600px;
          overflow-x: hidden;

}
.imgM{
  height: 350px;
  overflow-x: hidden;
}
.signUpPageP{
  overflow-x: hidden;
}
}
</style>



现在就加入！
马上就来
隐私政策
&时代；
巴巴拉巴巴拉
接近
我们不会共享您的邮件
登录
{{message}
#信号放大{
背景色：白色；
溢出x：隐藏；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.navbar自定义{
背景色：#ff9e0b；
} 
/*修改品牌和文字颜色*/
.navbar定制。navbar品牌，
.navbar自定义.navbar文本{
颜色：白色！重要；
字体大小：1.5em！重要；
}
.文字颜色{
颜色：白色；
字体系列：“Mountserrat”，无衬线；
字号：600；
}
.文字颜色关于{
颜色：#ff9e0b；
字体系列：“Mountserrat”，无衬线；
字号：600；
}
.text-color-about\p{
颜色：#ff9e0b；
字体系列：“Mountserrat”，无衬线；
字号：800；
字体大小：4em！重要；
}
.text-color-about_{
颜色：#ff9e0b；
字体系列：“Mountserrat”，无衬线；
字号：800；
字体大小：3em！重要；
}
.text-color-about\m{
颜色：白色；
字体系列：“Mountserrat”，无衬线；
字号：600；
字体大小：3em！重要；
}
.text-color-about_b{
颜色：白色；
字体系列：“Mountserrat”，无衬线；
自对准：居中；
字号：800；
字体大小：2em！重要；
}
.text-color-about\u sn{
颜色：#ff9e0b；
字体系列：“Mountserrat”，无衬线；
自对准：居中；
字号：800；
字体大小：1em！重要；
}
.bg小学{
颜色：#ff9e0b；
}
.bg imgPlayer{
包含：url（../assets/store-02.png）；
}
.btn海关{
背景色：#ff9e0b！重要；
}
.我的表格{
位置：相对位置；
显示：-ms flexbox；
显示器：flex；
填充：6rem；
-ms-flex方向：列；
弯曲方向：立柱；
宽度：70%；
身高：130%；
指针事件：自动；
背景色：#fff；
背景剪辑：填充框；
边框：8px实心#ff9e0b；
边界半径：1.1rem；
大纲：0；
最大宽度：500px；
}
.btn海关{
边界半径：1em；
背景色：#ff9e0b！重要；
}
@介质（最大宽度：375px）{
.导航栏海关{
宽度：375px；
溢出x：隐藏；
}
.我的表格{
宽度：330px；/**/
高度：600px；
溢出x：隐藏；
}
.imgM{
高度：350px；
溢出x：隐藏；
}
.signUpPageP{
溢出x：隐藏；
}
}