Bootstrap4使用時にbody要素上端がcontainer-fluidクラスからはみ出る

掲題の件、Bootstrap4を使用時に上端に画像のような隙間ができてしまいます。
機能的には問題ないですが、デザイン的には気に食わないので隙間をなくしたいと考えていますが可能でしょうか？

#[試したこと]
body要素のpadding、marginを0pxにしてみましたがだめでした。
ご教授のほど、よろしくお願いいたします。

html5
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <!-- スタイルシートの読み込み -->
6    <link rel="stylesheet" href="../css/sf5_labo_players_page.min.css" type="text/css">
7    <!-- BootstrapのCSS読み込み -->
8    <link href="../css/bootstrap.min.css" rel="stylesheet">
9    <!-- jQuery読み込み -->
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
11    <!-- BootstrapのJS読み込み -->
12    <script src="js/bootstrap.min.js"></script>
13   　<title>sf5_site_players-page</title>
14  </head>
15  <body>
16    <div class="container-fluid">
17      <div class="row">
18        <div class="col-sm-3">
19          <div class="site-logo">
20            <h1 class="logo-text">sf5_labo</h1>
21          </div>
22          <ul>
23            <li class="cont">プレイヤーネーム</li>
24            <li class="cont">PSID</li>
25            <li class="cont">研究内容・課題</li>
26            <li class="cont">対象シーズン：</li>
27            <li class="cont">コミュニティURL</li>
28          </ul>
29          <a href="../sf5_labo_top.html">topページ=></a>
30        </div>
31        <div class="col-sm-9">
32          <!-- キャラ対策の列 -->
33          <div class="table-char">
34            <h3>キャラ対策</h3>
35            <table border="1">
36              <!-- 1行目 -->
37              <tr>
38                <td>リュウ</td>
39                <td>リュウ</td>
40                <td>リュウ</td>
41                <td>リュウ</td>
42                <td>・・・</td>
43              </tr>
44              <!-- 2行目 -->
45              <tr>
46                <td>パターン1</td>
47                <td>パターン1</td>
48                <td>パターン1</td>
49                <td>パターン1</td>
50                <td>パターン1</td>
51              </tr>
52              <!-- 3行目 -->
53              <tr>
54                <td>・・・</td>
55                <td>・・・</td>
56                <td>・・・</td>
57                <td>・・・</td>
58                <td>・・・</td>
59              </tr>
60            </table>
61          </div>
62          <!-- 立ち回りの列 -->
63          <div class="table-char">
64            <h3>立ち回り</h3>
65            <table border="1">
66              <tr>
67                <td>リュウ</td>
68                <td>リュウ</td>
69                <td>リュウ</td>
70                <td>リュウ</td>
71                <td>・・・</td>
72              </tr>
73              <tr>
74                <td>パターン1</td>
75                <td>パターン1</td>
76                <td>パターン1</td>
77                <td>パターン1</td>
78                <td>パターン1</td>
79              </tr>
80              <tr>
81                <td>・・・</td>
82                <td>・・・</td>
83                <td>・・・</td>
84                <td>・・・</td>
85                <td>・・・</td>
86              </tr>
87            </table>
88          </div>
89        <!-- コンボの列 -->
90          <div class="table-char">
91            <h3>コンボ</h3>
92            <table border="1">
93              <tr>
94                <td>リュウ</td>
95                <td>リュウ</td>
96                <td>リュウ</td>
97                <td>リュウ</td>
98                <td>・・・</td>
99              </tr>
100              <tr>
101                <td>パターン1</td>
102                <td>パターン1</td>
103                <td>パターン1</td>
104                <td>パターン1</td>
105                <td>パターン1</td>
106              </tr>
107              <tr>
108                <td>・・・</td>
109                <td>・・・</td>
110                <td>・・・</td>
111                <td>・・・</td>
112                <td>・・・</td>
113              </tr>
114            </table>
115          </div>
116        </div>
117      </div>
118    </div>
119  </body>
120
121  <footer>
122  <p>Copyright 2019 sf_labo All rights Reserved./p>
123  </footer>
124</html>

scss
1html{
2  width: auto;
3  height: auto;
4  margin: auto;
5  padding: inherit;
6  font-size: 10px;
7  background-color: black;
8}
9
10body{
11  width: auto;
12  height: auto;
13  margin: 0px;
14  padding: 0px;
15  font-size: 1.4rem;
16  // background-color: orange;
17  // border: black 2px solid;
18}
19//
20// header{
21//   width: auto;
22//   height: auto;
23//   margin: auto;
24//   padding: inherit;
25//   font-size: 14px;
26//   background-color: blue;
27//   border: black 2px solid;
28// }
29
30footer{
31  width: auto;
32  height: auto;
33  margin: auto;
34  padding: inherit;
35  font-size: 14px;
36  color:white;
37  background-color: black;
38  // border: black 2px solid;
39}
40
41img{
42  width: auto;
43  height: auto;
44  max-width: 50%;
45  max-height: 50%;
46}
47
48// .container-fluid{
49//   width: auto;
50//   height: auto;
51//   margin: auto;
52//   padding: inherit;
53//   font-size: 14px;
54//   background-color: yellow;
55//   border: black 2px solid;
56// }
57
58// .row{
59//   width: auto;
60//   height: auto;
61//   margin: auto;
62//   padding: inherit;
63//   font-size: 14px;
64//   background-color: gray;
65//   border: black 2px solid;
66// }
67.table-char{
68  display: table;
69  width: 90%;
70  height: auto;
71  margin: 10px auto;
72  padding: 10px;
73  background-color: white;
74  border: white 2px solid;
75  h3{
76    width: 100px;
77    border:1px solid black;
78  }
79  table{
80    border: 1px solid black;
81  }
82}
83.site-logo{
84  width: auto;
85  height: auto;
86  margin: 10px 0px;
87  padding:inherit;
88  font-size: 30px;
89  background-color: white;
90  border: black 2px solid;
91  display: flex;
92  justify-content: center;
93  align-items: center;
94}
95
96.col-sm-3{
97  width: auto;
98  height: auto;
99  margin: 0px auto;
100  padding: 10px;
101  font-size: 14px;
102  background-color: white;
103  border: black 2px solid;
104  border-right: none;
105  ul{
106    padding: 0px;
107    margin: 10px 0px 0px;
108  }
109  li{
110    list-style: none;
111    width: 100%;
112    height: auto;
113    padding: 5px;
114    margin: 0px;
115    background-color: white;
116    border-top: 1px solid black;
117    border-left: 1px solid black;
118    border-right: 1px solid black;
119  }
120  li:last-child{
121    border: 1px solid black;
122  }
123}
124//
125// .col-sm-6{
126//   float:left;
127//   width: auto;
128//   height: auto;
129//   margin: auto;
130//   padding: inherit;
131//   font-size: 14px;
132//   background-color: green;
133//   border: black 2px solid;
134// }
135
136// .col-sm-8{
137//   width: auto;
138//   height: auto;
139//   margin: auto;
140//   padding: inherit;
141//   font-size: 14px;
142//   background-color: red;
143//   border: black 2px solid;
144// }
145
146.col-sm-9{
147  width: auto;
148  height: auto;
149  margin: 0px auto;
150  padding: 0px 30px;
151  font-size: 14px;
152  background-color: white;
153  border: black 2px solid;
154}
155// .col-sm-12{
156//   height: auto;
157//   margin: auto;
158//   padding: 10px;
159//   font-size: 12px;
160//   background-color: gray;
161//   border: black 1px solid;
162// }
163

行動規範の内容に同意します

回答1件

ベストアンサー

title要素の直前に全角スペースがあるためです。全角スペースを削除してください(動作確認用リンク)。

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <!-- スタイルシートの読み込み -->
6    <link rel="stylesheet" href="../css/sf5_labo_players_page.min.css" type="text/css">
7    <!-- BootstrapのCSS読み込み -->
8    <link href="../css/bootstrap.min.css" rel="stylesheet">
9    <!-- jQuery読み込み -->
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
11    <!-- BootstrapのJS読み込み -->
12    <script src="js/bootstrap.min.js"></script>
13   <!-- 　 --><title>sf5_site_players-page</title>
14  </head>
15  <body>
16    <div class="container-fluid">
17      <div class="row">
18        <div class="col-sm-3">
19          <div class="site-logo">
20            <h1 class="logo-text">sf5_labo</h1>
21          </div>
22          <ul>
23            <li class="cont">プレイヤーネーム</li>
24            <li class="cont">PSID</li>
25            <li class="cont">研究内容・課題</li>
26            <li class="cont">対象シーズン：</li>
27            <li class="cont">コミュニティURL</li>
28          </ul>
29          <a href="../sf5_labo_top.html">topページ=></a>
30        </div>
31        <div class="col-sm-9">
32          <!-- キャラ対策の列 -->
33          <div class="table-char">
34            <h3>キャラ対策</h3>
35            <table border="1">
36              <!-- 1行目 -->
37              <tr>
38                <td>リュウ</td>
39                <td>リュウ</td>
40                <td>リュウ</td>
41                <td>リュウ</td>
42                <td>・・・</td>
43              </tr>
44              <!-- 2行目 -->
45              <tr>
46                <td>パターン1</td>
47                <td>パターン1</td>
48                <td>パターン1</td>
49                <td>パターン1</td>
50                <td>パターン1</td>
51              </tr>
52              <!-- 3行目 -->
53              <tr>
54                <td>・・・</td>
55                <td>・・・</td>
56                <td>・・・</td>
57                <td>・・・</td>
58                <td>・・・</td>
59              </tr>
60            </table>
61          </div>
62          <!-- 立ち回りの列 -->
63          <div class="table-char">
64            <h3>立ち回り</h3>
65            <table border="1">
66              <tr>
67                <td>リュウ</td>
68                <td>リュウ</td>
69                <td>リュウ</td>
70                <td>リュウ</td>
71                <td>・・・</td>
72              </tr>
73              <tr>
74                <td>パターン1</td>
75                <td>パターン1</td>
76                <td>パターン1</td>
77                <td>パターン1</td>
78                <td>パターン1</td>
79              </tr>
80              <tr>
81                <td>・・・</td>
82                <td>・・・</td>
83                <td>・・・</td>
84                <td>・・・</td>
85                <td>・・・</td>
86              </tr>
87            </table>
88          </div>
89        <!-- コンボの列 -->
90          <div class="table-char">
91            <h3>コンボ</h3>
92            <table border="1">
93              <tr>
94                <td>リュウ</td>
95                <td>リュウ</td>
96                <td>リュウ</td>
97                <td>リュウ</td>
98                <td>・・・</td>
99              </tr>
100              <tr>
101                <td>パターン1</td>
102                <td>パターン1</td>
103                <td>パターン1</td>
104                <td>パターン1</td>
105                <td>パターン1</td>
106              </tr>
107              <tr>
108                <td>・・・</td>
109                <td>・・・</td>
110                <td>・・・</td>
111                <td>・・・</td>
112                <td>・・・</td>
113              </tr>
114            </table>
115          </div>
116        </div>
117      </div>
118    </div>
119  </body>
120
121  <footer>
122  <p>Copyright 2019 sf_labo All rights Reserved./p>
123  </footer>
124</html>