Boostrap 4 div расширяется после отправки формы

Интересно, может ли кто-нибудь помочь ... у меня эта странная проблема, когда мой Div расширяется после отправки формы.

После отправки я сделал предупреждение, если отправка прошла успешно. Это предупреждение работает, но когда я нажимаю «ОК» и возвращаюсь на веб-страницу, блоки div значительно увеличиваются.

Я погуглил, но, похоже, не могу найти никаких сценариев, в которых люди это видели.

CSS:

/* sm */
@media (min-width: 768px) {
  #formDiv {
    width: 20%;
  }
}


/* md */
@media (min-width: 992px) {
  #formDiv {
    width: 20%;
  }
}


/* lg */
@media (min-width: 1200px) {
  #formDiv {
    width: 20%;
  }
}

body {
  /*font-family: 'Shrikhand', cursive;*/
  font-family: 'Rancho', cursive;
  /*font-family: 'Tangerine', cursive; Snelsmore House, Oxford Rd, Donnington, Newbury RG14 3AL*/
  width: 100%;
  height: 100%;
  background: #D4CFBD;
}

.jumbotron {
  /*font-family: 'Rancho', cursive;*/
  text-align: center;
  margin-bottom: 0px;
}

.container-fluid {
  min-height: 100%;
}

#mainContainer {
  padding-top: 20px;
  padding-bottom: 20px;
  background: #D4CFBD;
}

#mainDiv {
  text-align: center;
  background: #D4CFBD;
  height: 50%;
}

#MillyPic,
#stefnCraigPic {
  height: auto;
  max-width: 100%;
}

#formDiv {
  padding-top: 30px;
  margin: auto;
  max-width: 100%;
}

HTML:

<div class = "container-fluid" id = "mainContainer">
    <div id = "mainDiv">
        <h2>Hey there,</h2>
        <h2>We would like to invite you to our wedding on the 22nd Dec 2018!</h2>
        <br>
        <h3>To confirm your attendance can you please fill in the below form...</h3>
    </div>
    <hr>
    <div id = "formDiv">
      <div id = "RSVP">
          <form method = "post" class = "justify-content-center text-center" >
              <div class = "form-check text-left" id = "RadioYes">
                  <input class = "form-check-input" type = "radio" name = "responseRadio" id = "Yes" value = "1" onclick = "dynInput();">
                  <label class = "form-check-label" for = "Yes">
                      <h4>Attending</h4>
                  </label>
              </div>
              <div class = "form-check text-left" id = "RadioNo">
                  <input class = "form-check-input" type = "radio" name = "responseRadio" id = "No" value = "0" checked>
                  <label class = "form-check-label" for = "No">
                      <h4>Cant Make it</h4>
                  </label>
              </div>
              <hr id = "attendanceHr" class = "d-none">
              <div class='d-none form-group' id='guestNamesDivs'>
                  <div class = "form-group text-left">
                      <label for = "guestName1"><h4>Guest One:</h4></label>
                      <input type = "text" class = "form-control" id = "guestName1" name = "guestName1" placeholder = "Firstname and Surname">
                  </div>
                  <div class = "form-group text-left">
                      <label for = "guestName2"><h4>Guest Two:</h4></label>
                      <input type = "text" class = "form-control" id = "guestName2" name = "guestName2" placeholder = "Firstname and Surname">
                  </div>
                  <div class = "form-group form-check text-left">
                        <input type = "checkbox" class = "form-check-input" id = "dietaryReq" name = "DRYN" onclick = "dietaryReqDisplay();">
                      <label class = "form-check-label lead" for = "dietaryReq">Dietary Requirements.</label>
                  </div>
              </div>
              <div class = "d-none" id = "dietaryReqTextDiv">
                  <div class = "form-group">
                    <textarea class = "form-control" id = "dietaryReqTextArea" name = "DR" rows = "3"></textarea>
                  </div>
              </div>
              <br>
              <button type = "submit" name = "submit" class = "btn btn-primary">Submit</button>
          </form>
      </div>
    </div>
</div>

PHP - TEST предупреждение, если форма успешно отправлена ​​в базу данных:

if (isset($_POST['submit'])){    
    $attending = $_POST['responseRadio'];

    if ($attending == "1"){
        $guest_one = mysqli_real_escape_string($conn, $_POST['guestName1']);
        $guest_two = mysqli_real_escape_string($conn, $_POST['guestName2']);
        $dietary_req = mysqli_real_escape_string($conn, $_POST['DRYN']);
        $dietary_needs = mysqli_real_escape_string($conn, $_POST['DR']); 

        if ($_POST['DRYN']= = "on"){
            $dietary_req = "1";
            $dietary_req = mysqli_real_escape_string($conn,$dietary_req);
        }else{
            $dietary_req = "0";
            $dietary_req = mysqli_real_escape_string($conn,$dietary_req);
        }

        $sql = "INSERT INTO weddingRSVP (guest_1, guest_2, attending, dietary_req, dietary_info) VALUES ('$guest_one', '$guest_two', '$attending', '$dietary_req','$dietary_needs');";        

        if (mysqli_query($conn, $sql)){
            $message .= "You have successful RSVP'd to the wedding. \n As you are attending please go ahead and make a song choice for the reception :)!";
            echo "<script type='text/javascript'>
                    alert('test')
                  </script>";
        } else{ 
            $error .=  "ERROR: Could not able to execute $sql. " . mysqli_error($link);
        }

    }else{        

        $sql = "INSERT INTO weddingRSVP (guest_1, guest_2, attending, dietary_req, dietary_info) VALUES ('$guest_one', '$guest_two', '$attending', '$dietary_req','$dietary_needs');";        

        if (mysqli_query($conn, $sql)){
            $message .= "You have successful RSVP'd to the wedding. \n As you are attending please go ahead and make a song choice for the reception :)!";
        } else{ 
            $error .= "ERROR: Could not able to execute $sql. " . mysqli_error($link);
        }
    }
}

Если у кого-то есть идеи, почему это происходит, я был бы очень благодарен.

РЕДАКТИРОВАТЬ - ДОБАВЛЕНИЕ JAVASCRIPT:

var radioYes = document.getElementById("Yes");
var DivRadioNo = document.getElementById("RadioNo");
var dietaryReq = document.getElementById("dietaryReq");

function dynInput () {
    if (radioYes.checked) {
      document.getElementById("guestNamesDivs").classList.remove("d- 
      none");
      DivRadioNo.classList.add("d-none");
      document.getElementById("attendanceHr").classList.remove("d- 
      none");
    }
}

function dietaryReqDisplay () {
    if (dietaryReq.checked) {
     document.getElementById("dietaryReqTextDiv").classList.remove("d- 
     none");
    }
}

Перед отправкой

после подачи (1)

после подачи (3)