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

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

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

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

ТИА

#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>

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

— 11.02.2019 20:42

это просто потому, что загрузочный CDN не включен во фрагмент @AndyHoffman

— 11.02.2019 21:00

css html twitter-bootstrap

11.02.2019 20:37

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...