I have this problem, that if I have more than 530px then the input fields are good and not displayed in the same width.

1. Image> 1200px = (

2. Image> 870px = (

3. Image> 570px is a silhouette but also = (

4. Image <530px = // The first 4 input fields are fine, but the REGME button is slightly longer = (.

Can someone help me fix this? br and thx

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;700&display=swap');

:root{
  --hover:            lime;
  --text-size:        16px;
  /*
  --text-font:        Arial, sans-serif;
  */
  --text-font:        'Montserrat',sans-serif;
  --padding:          10px;
  --btn_color:        AliceBlue; /* CornflowerBlue DodgerBlue */
  --btn-color_:       black;
  --inp_color:        Beige; /* Bisque AliceBlue  */
  /*
  --btn-size-w:       200px;
  */
  --btn-size-w:       100%;
  --btn-size-h:       60px;
  --txt-size:         1em;
}
body {
  font-family: 'Montserrat',sans-serif;
  letter-spacing: 4px;
  background-color: white;
  /*
  background-color: #25252A;
  */
  /* For Button 5-7 */
  box-sizing: border-box;
  padding: 0;
  margin:0;

  width:              100%;
  height:             100%;
  font-size:          var(--text-size);
} 


.reg_login_form_input_1{
  /*
  position: absolute;
  */
  height: calc(var(--btn-size-h) - 6px);
  position: relative;
  top:0;
  left:0;
  width: 100%;
  max-width: 530px;
  min-width: 230px;
  border: 2px solid black;
  font-family: inherit;
  font-size: inherit;
  color:black;
  outline:none;
  padding:1px;
  background:none;
  cursor: pointer; }
.reg_login_form_input_1:hover{
  border-color: lightblue; }
.reg_login_form_input_1:focus{
  border-color: red; }
.reg_login_form_label_1{
  /*
  position: absolute;
  top:calc(var(--btn-size-h) / 3);
  */
  padding:0 1rem;
  top:-40px;
  left:-28%;
  position: relative;
  color:black;
  cursor: text;
  transition:top 200ms ease-in; }
/*
Sagt aus, wenn placeholder nicht gezeigt und focus nicht verändert, dann bleib oben wenn text geschrieben wurde ^_^
*/
.reg_login_form_input_1:focus ~ .reg_login_form_label_1,
.reg_login_form_input_1:not(:placeholder-shown).reg_login_form_input_1:not(:focus) ~ .reg_login_form_label_1{
  background: white;
  border-radius: 10px;
  top: -70px;  }

.reg_container{
  width: 100%;
  /*
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  */
}  
.reg_container_inputs{
  flex-direction: row;
  margin-bottom: -10px;
  min-width:230px;
  justify-content: space-evenly;
  align-items: center;}
@media (max-width: 530px){
  .reg_container_inputs {
    /*
    margin-top: -2px;
    */
  }
}
@media (min-width: 530px){
  /* Damit nach 730px ein margin aller sections entsteht */
  .reg_container_inputs {
    max-width:100%;
    display: inline-block;
    padding: 0px;
  }
  /*
  .login_container_2{
    
  }
  */
}




.btn-9{
  position: relative;
  color: #2196f3;
  border:2px solid #2196f3;
  /*
  color: #42fbf2;
  border:2px solid #42fbf2;
  */
  background: white;
  text-transform: uppercase;
  overflow: hidden;
  transition: 0.2s;
  border-top: -2px; }
.btn-9a{
  position: relative;
  color: #2196f3;
  border:0px solid #2196f3;
  /*
  color: #42fbf2;
  border:2px solid #42fbf2;
  */
  background: white;
  text-transform: uppercase;
  overflow: hidden;
  transition: 0.2s;
  border-top: -2px; }
.btn-9 span{
  position: absolute;
  display: block; }
.btn-9 span:nth-child(1){
  top:0;
  left: -100%;
  width: 100%;
  height: 20px;
  background: linear-gradient(90deg, transparent, #31daf8); }
.btn-9:hover{
  border:2px solid #42fbf2;
  font-weight: bold;
  z-index:1;
  color: #2196f3;
  /*
  color: #42fbf2;
  background: #7abcf2;
  border: 2px solid #2196f3;
  color: black;
  */
  cursor: pointer; }
.btn-9:hover span:nth-child(1){
  left:100%;
  transition: 1s; }
  
  
.btns_standard_a{
  width: 100%;
  height: var(--btn-size-h);
  font-size: var(--txt-size); 
  border: none; }
  <center>
    <div class="reg_container">
      <div class="reg_container_inputs">
        <input class="reg_login_form_input_1" type="text" id="reg_un" autocomplete="off" placeholder=" ">
        <label class="reg_login_form_label_1" for="reg_un">username</label>
      </div>
      <div class="reg_container_inputs">
        <input class="reg_login_form_input_1" type="text" id="reg_vn" autocomplete="off" placeholder=" ">
        <label class="reg_login_form_label_1" for="reg_vn">vorname</label>
      </div>
      <br>
      <div class="reg_container_inputs">
        <input class="reg_login_form_input_1" type="password" id="reg_pw" autocomplete="off" placeholder=" ">
        <label class="reg_login_form_label_1" for="reg_pw">password</label>
      </div>
      <div class="reg_container_inputs">
        <input class="reg_login_form_input_1" type="password" id="reg_pw_re" autocomplete="off" placeholder=" ">
        <label class="reg_login_form_label_1" for="reg_pw_re">password retry</label>
      </div>
      
      <button class="btns_standard_a btn-9 " onclick="">
        <span></span>  
        RegMe
      </button>   
    </div>
  </center>

trash2 is a new partner in this site. Be careful when asking for explanations, comments and replies. Check out our Code of Conduct.