Bootstrap button extends container

Question

When I make the screen smaller, the content of the box pushes the submit button out.

Do I need a media query to solve this? If so, what do I need?

I've included the code to have a look at. I have had a go at some media queries but I am probably doing the wrong thing as I can't work out what it is that needs to happen when the screen size is changed. Most notably, going smaller.

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

The issue is this rule:

#register {
    height: 95%;
    …
}

If you remove it, the button no longer breaks out of the container.