Ширина загрузочной шины 4 слишком широкая

Я борюсь с мобильным меню, которое слишком широко отображается на мобильном устройстве. Использование Bootstrap 4 с Творческий комплект материалов Типа.

Я совершенно уверен, что это простое исправление, или я неправильно использую Bootstrap, но я застрял в туннельном видении и не знаю, как устранить проблему дальше.

Вот иллюстрация того, что я хочу сделать: введите описание изображения здесь

Демо:
Живая демонстрация здесь.

Вот мой html-код:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>JavaScript Calculator</title>
  <link rel="stylesheet" href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css'; return false;">
  <link rel="stylesheet prefetch" href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'; return false;">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand">JavaScript Calculator</a>
      </div>
    </div>
  </nav>

  <container>

  <div class="calculator col-8 jumbotron">
    <div class="field-group">
      <input id="input-field" type="text" name="calc-output" value="">
    </div>
      <button id="ac-button" class="btn btn-default clear-button" value="AC" onclick="">AC</button>
      <button id="ce-button" class="btn btn-default clear-button" value="CE" onclick="">CE</button>
      <button id="divide-button" class="btn btn-success operator-button" value="/" onclick="">/</button>
      <button id="multiple-button" class="btn btn-success operator-button" value="x" onclick="">X</button>
      <button id="7-button" class="btn btn-success num-button" value="7" onclick="">7</button>
      <button id="8-button" class="btn btn-success num-button" value="8" onclick="">8</button>
      <button id="9-button" class="btn btn-success num-button" value="9" onclick="">9</button>
      <button id="minus-button" class="btn btn-success operator-button" value="-" onclick="">-</button>
      <button id="4-button" class="btn btn-success num-button" value="4" onclick="">4</button>
      <button id="5-button" class="btn btn-success num-button" value="5" onclick="">5</button>
      <button id="6-button" class="btn btn-success num-button" value="6" onclick="">6</button>
      <button id="plus-button" class="btn btn-success operator-button" value="+" onclick="">+</button>
      <button id="1-button" class="btn btn-success num-button" value="1" onclick="">1</button>
      <button id="2-button" class="btn btn-success num-button" value="2" onclick="">2</button>
      <button id="3-button" class="btn btn-success num-button" value="3" onclick="">3</button>
      <button id="equal-button" class="btn btn-success operator-button" value="=" onclick="">=</button>
      <button id="0-button" class="btn btn-success num-button" value="0" onclick="">0</button>
      <button id="dot-button" class="btn btn-success operator-button" value="." onclick="">.</button>
  </div>

</container>

  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
  <script src="js/index.js"></script>

</body>
</html>

И вот мой css:

body {
  background: white;
}

nav {
  margin-bottom: 2.3rem;
}
.navbar-default {
  background: #2196F3 !important;
}

.calculator {
  margin: 0 auto;
  min-height: 475px;
  max-width: 450px;
}

.jumbotron {
  padding-top: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.calculator button { 
  float: left;
  width: 24%;
  font-size: 150%;
}

#input-field { 
  text-align: right;
  padding: 10px;
  margin: 10px 0;
  width: 97.3%;
  border-radius: 5px;
  font-size: 1.3rem;
}

.navbar-brand {
  font-size: 2rem;
}

.clear-button {
  background-color: #80C6FF !important;
}

.num-button,
.operator-button {
  background-color: #2196F3 !important;
}

ОТВЕТЫ