HTML form: <input> boxes moving away from each other as screen width increases

Question

I am having problems with my form where when the screen width is above 575px, two of the boxes keep moving away from each other. What I want is for them to not move away from each other when the screen resolution is 575px or higher, how would I be able to do that?

You can find the code for this in the JSFiddle link and also below. Any help would be greatly appreciated, thanks.

https://jsfiddle.net/okahn00/z6jfw7ds/131/

HTML and CSS for the code:

body {
  background-color: #000;
  color: white;
  font-size: 25px;
  text-align: center;
}

form {
  margin-top: 15%;
}

label {
  display: block;
  margin-top: 10px;
  font-size: 60%;
}

/* <label> tag for 'Date of Birth' */
.date-of-birth {
  margin-bottom: 25px;
  margin-top: 20px;
  text-align: center;
}

/* styles the 'First name', 'Last name' and 'E-mail' boxes */
input {
  width: 94%;
  height: 50px;
  background-color: #000;
  border: 2px solid #fff;
  margin-top: 3px;
}

/* The 'Day' and 'Month' dropdown boxes */
select {
  width: 47%;
  height: 50px;
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
  margin-top: -8px;
  margin-bottom: 20px;
  padding-left: 15px;
}

/* 'Day' dropbox */
select:first-child {
  margin-right: 12px;
}

.form-group {
  display: inline-block;
  width: 47.2%;
  margin-bottom: 10px;
}

/* Pushes both boxes to the sides */
.form-group1 {
  margin-right: 8px;
}

@media only screen and (min-width: 575px) {

  /* Adds padding to the whole form */
  .mail-padding {
    padding: 20px 150px 0 150px;
  }

  /* div container for 'First name' */
  .form-group1 {
    margin-right: 0px;
  }

  /* sets width of both 'First name' 'Last name' boxes */
  .form-group input {
    width: 94px;
    /* width: 80%; */
  }

  /* <input> box for 'Day' and 'Month' */
  select {
    width: 110px;
  }

  /* <input> box for 'E-mail' */
  form>div>input {
    width: 220px;
  }
}

<form>

  <div class="mail-padding">
    <div class="form-group1 form-group">
      <label>First name</label>
      <input>
    </div>

    <div class="form-group2 form-group">
      <label>Last name</label>
      <input>
    </div>

    <label>E-mail</label>
    <input>
  </div>

  <label class="date-of-birth">Date of Birth</label>

  <div class="mail-padding">
    <select id="dob-day" name="dob">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>

    <select id="dob-month" name="dob">
      <option value="jan">Jan</option>
      <option value="feb">Feb</option>
    </select>
  </div>
</form>

Answer 1

If you add a "form container" and clean your media query code on the CSS a little bit, it works. See https://jsfiddle.net/40gkLzym/63/ for reference.

Try this on the HTML:

<div class="form-container">
 
 <form>
   
   <div class="form-group1 form-group">
     <label>First name</label>
     <input>
   </div>
   
   <div class="form-group2 form-group">
     <label>Last name</label>
     <input>
   </div>

   <label>E-mail</label>
   <input id="email">


   <label class="date-of-birth">Date of Birth</label>
   
   <div class="mail-padding">
     <select id="dob-day" name="dob">
       <option value="1">1</option>
       <option value="2">2</option>
     </select>

     <select id="dob-month" name="dob">
       <option value="jan">Jan</option>
       <option value="feb">Feb</option>
     </select>
   </div>
   
 </form> </div>

... And try this on the CSS:

    body {
  background-color: #000;
  color: white;
  font-size: 25px;
  text-align: center;
}

form {
  margin-top: 15%;
}

label {
  display: block;
  margin-top: 10px;
  font-size: 60%;
}

/* <label> tag for 'Date of Birth' */
.date-of-birth {
  margin-bottom: 25px;
  margin-top: 20px;
  text-align: center;
}

/* styles the 'First name', 'Last name' and 'E-mail' boxes */
input {
  width: 94%;
  height: 50px;
  background-color: #000;
  border: 2px solid #fff;
  margin-top: 3px;
}

/* The 'Day' and 'Month' dropdown boxes */
select {
  width: 47%;
  height: 50px;
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
  margin-top: -8px;
  margin-bottom: 20px;
  padding-left: 15px;
}

.form-group {
  display: inline-block;
  width: 47.2%;
  margin-bottom: 10px;
}

/* Pushes both boxes to the sides */
.form-group1 {
  margin-right: 8px;
}

@media only screen and (min-width: 575px) {
  .form-container {
    display: flex;
    justify-content: center;
  }
  
  form {
    flex: 1;
    max-width: 575px;
  }
}

Answer 2

If you don't want to expand when screen size over 575px- you simply can do this.

@media only screen and (min-width: 575px){
     .mail-padding {
        padding: 20px 150px 0 150px;
        max-width: 575px;
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
     }
}

Answer 3

You can add a max-width to .form-group in the media query to prevent them from getting wider and wider, for example 120px, as I did below:

body {
  background-color: #000;
  color: white;
  font-size: 25px;
  text-align: center;
}

form {
  margin-top: 15%;
}

label {
  display: block;
  margin-top: 10px;
  font-size: 60%;
}

/* <label> tag for 'Date of Birth' */
.date-of-birth {
  margin-bottom: 25px;
  margin-top: 20px;
  text-align: center;
}

/* styles the 'First name', 'Last name' and 'E-mail' boxes */
input {
  width: 94%;
  height: 50px;
  background-color: #000;
  border: 2px solid #fff;
  margin-top: 3px;
}

/* The 'Day' and 'Month' dropdown boxes */
select {
  width: 47%;
  height: 50px;
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
  margin-top: -8px;
  margin-bottom: 20px;
  padding-left: 15px;
}

/* 'Day' dropbox */
select:first-child {
  margin-right: 12px;
}

.form-group {
  display: inline-block;
  width: 47.2%;
  margin-bottom: 10px;
}

/* Pushes both boxes to the sides */
.form-group1 {
  margin-right: 8px;
}

@media only screen and (min-width: 575px) {

  /* Adds padding to the whole form */
  .mail-padding {
    padding: 20px 150px 0 150px;
  }
  .form-group {
    max-width: 120px;
  }
  /* div container for 'First name' */
  .form-group1 {
    margin-right: 0px;
  }

  /* sets width of both 'First name' 'Last name' boxes */
  .form-group input {
    width: 94px;
    /* width: 80%; */
  }

  /* <input> box for 'Day' and 'Month' */
  select {
    width: 110px;
  }

  /* <input> box for 'E-mail' */
  form>div>input {
    width: 220px;
  }
}

<form>

  <div class="mail-padding">
    <div class="form-group1 form-group">
      <label>First name</label>
      <input>
    </div>

    <div class="form-group2 form-group">
      <label>Last name</label>
      <input>
    </div>

    <label>E-mail</label>
    <input>
  </div>

  <label class="date-of-birth">Date of Birth</label>

  <div class="mail-padding">
    <select id="dob-day" name="dob">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>

    <select id="dob-month" name="dob">
      <option value="jan">Jan</option>
      <option value="feb">Feb</option>
    </select>
  </div>
</form>