Bootstrapのグリッドシステムで要素が勝手に改行される

前提

**前提：**Bootstrapのグリッドシステムを自己学習しています。

###実現したいこと
各要素の位置を保ったまま、図１の画像の数字の書かれた各要素間に余白を入れたい。

図１

###起こっているエラー
marginを指定すると図２のように要素が勝手に改行されてしまう。

図２

###コード

html
1<!doctype html>
2<html lang="ja">
3
4<head>
5    <!-- Required meta tags -->
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8
9    <!-- Bootstrap CSS -->
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
11        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
12    <link rel="stylesheet" href="boottest.css">
13    <title>Hello, world!</title>
14</head>
15
16<body>
17
18    <nav class="navbar navbar-expand-md navbar-light bg-light">
19        <a class="navbar-brand" href="#">Code</a>
20        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
21            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
22            <span class="navbar-toggler-icon"></span>
23        </button>
24        <div class="collapse navbar-collapse" id="navbarNav">
25            <ul class="navbar-nav">
26                <li class="nav-item">
27                    <a class="nav-link" href="#">ホーム</a>
28                </li>
29                <li class="nav-item">
30                    <a class="nav-link" href="#">メニュー1</a>
31                </li>
32                <li class="nav-item">
33                    <a class="nav-link" href="#">メニュー2</a>
34                </li>
35            </ul>
36        </div>
37    </nav>
38    <h1>Hello, world!</h1>
39
40
41
42    <div class="container">
43        <div class="row text-center">
44            <div class="col-md-6 bg-info">
45                1
46            </div>
47            <div class="col-md-6 bg-primary">
48                2
49            </div>
50        </div>
51
52        <div class="row text-center">
53            <div class="col-md-3 bg-info">
54                1
55            </div>
56            <div class="col-md-3 bg-warning">
57                2
58            </div>
59            <div class="col-md-3 bg-primary">
60                3
61            </div>
62            <div class="col-md-3 bg-success">
63                4
64            </div>
65        </div>
66    </div>
67
68
69    <!-- Optional JavaScript -->
70    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
71    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
72        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
73    </script>
74    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
75        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
76    </script>
77    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
78        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
79    </script>
80</body>
81
82</html>

css
1* {
2    padding: 0px;
3    margin: 0px;
4    box-sizing: border-box;
5}
6
7body {
8    font-family: "Avenir Next";
9    background-color: #f2f2f2;
10}
11
12.container {
13    
14    margin-right: auto;
15    margin-left: auto;
16}
17
18.col-md-6,.col-md-3 {
19    margin: 10px;
20}