Кнопка Bootstrap расширяет контейнер

Question

Когда я уменьшаю размер экрана, содержимое поля выталкивает кнопку отправки.

Нужен ли мне медиа-запрос для решения этой проблемы?Если это так, что мне нужно?

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

TIA

#register {
  height: 95%;
  padding: 2rem 1rem;
}

p {
  text-align: left !important;
}

.jumbotron1 {
  background-color: #e9ecef
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col">
      <div class="jumbotron1 jumbotron-fluid" id="register">
        <div class="container1">
          <h1 class="display-4">Register your interest!</h1>
          <p class="lead">Don't miss out - register now! </p>
          <form>
            <div class="form-group">
              <div class="row">
                <div class="col">
                  <label for="firstname">First name</label>
                  <input type="text" class="form-control" id="firstname" placeholder="Enter first name">
                </div>
                <div class="col">
                  <label for="lastname">Last name</label>
                  <input type="text" class="form-control" id="lastname" placeholder="Enter last name">
                </div>
              </div>
              <br>
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <h4>Which product are you interested in?</h4>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
              <label class="form-check-label" for="inlineCheckbox1">Shave butter</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
              <label class="form-check-label" for="inlineCheckbox2">Shave foam</label>
            </div>
            <br>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
              <label class="form-check-label" for="inlineCheckbox3">Shave gel</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
              <label class="form-check-label" for="inlineCheckbox3">After care shave</label>
            </div>
            <br>
            <br>
            <div> <button type="submit" class="btn btn-primary">Submit</button></div>

Answer 1

Проблема заключается в следующем правиле:

#register {
    height: 95%;
    …
}

Если вы удалите его, кнопка больше не вырывается из контейнера.