引导按钮扩展了容器

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%;
    …
}

如果将其删除，则按钮不再从容器中伸出。