Bootstrap button extends container - css

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.