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

如果将其移除，按钮将不再脱离容器。