【Webサイト制作】Google Chromeで見るとヘッダー上部に隙間ができてしまいます。

HTML, CSS(Bootstrap使用）,JQueryで作っているシンプルなWebサイトなのですが、Google Chromeでみるとヘッダーの上部に少しの隙間ができてしまっています。
スクロールするとヘッダー上部の隙間から要素が見える状態です。navにはmarginは特についていません。

CSSに
*(アスタリスク) {
margin: 0px;
padding: 0px;
}
を追加したのですがなおりません。
ただ不思議なことに、たまにこの隙間がなくなることがあるのですが、また何度も更新するうちに隙間が現れます。

Safari（PC、スマホとも）でみると問題ありませんので
Chromeの問題なのかと思うのですが、解決策のアイデアをいただけますと幸いです。
よろしくおねがいいたします。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4　　省略
5</head>
6<body>
7  <!--Navigaton-->
8  <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top py-3 px-4">
9  <div class="container-fluid">
10    <a class="navbar-brand" href="#"><img src="../img/logo.png" alt="logo"></a>
11    <!--Language Dropdown-->
12      <ul class="nav navbar-nav mr-auto languages">
13      <li class="nav-item dropdown">
14        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
15          Language
16        </a>
17        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
18          <a class="dropdown-item active" href="#">English</a>
19          <a class="dropdown-item" href="#">簡体中文</a>
20
21        </div>
22      </li>
23    </ul>
24    <!--Menu-->
25    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
26      <span class="navbar-toggler-icon"></span>
27    </button>
28    <div class="collapse navbar-collapse" id="navbarResponsive">
29      <ul class="navbar-nav ml-auto">
30        <li class="nav-item">
31          <a class="nav-link" href="#">Home</a>
32        </li>
33        <li class="nav-item">
34          <a class="nav-link" href="#">Service</a>
35        </li>
36        <li class="nav-item">
37          <a class="nav-link" href="#">About</a>
38        </li>
39        <li class="nav-item">
40          <a class="nav-link" href="#">Contact</a>
41        </li>
42      </ul>
43    </div>
44  </div>
45  </nav>
46  <!--Top-->
47  <div class="jumbotron-fluid message">
48  <div class="container top text-center">
49      <h1>Message 1</h1>
50      <h4>message message message</h4>
51  </div>
52  </div>
53  <!--Services-->
54  <div class="container-fluid service-heading padding">
55    <div class="row">
56      <div class="col-12">
57          <h1>Title</h1>
58          <h1>title cont.</h1>
59      </div>
60    </div>
61    <div class="row">
62      <div class="col-12">
63        <h2>Service service</h2>
64      </div>
65    </div>
66    <div class="row services wow fadeIn" data-wow-delay="0.3s">
67      <div class="col-6 col-md-4">
68  　　　　略
69      </div>
70      <div class="col-6 col-md-4">
71  　　　　略
72      </div>
73      <div class="col-6 col-md-4">
74  　　　　略
75      </div>
76      <div class="col-6 col-md-4">
77　　　　　略
78      </div>
79      <div class="col-6 col-md-4">
80　　　　　略
81      </div>
82      <div class="col-6 col-md-4">
83   　　　略
84      </div>
85    </div>
86  </div>
87  <!--Benefits-->
88  <div class="container-fluid padding blue-bg">
89    <div class="row benefits">
90      <div class="col-sm-12 col-md-6 benefit wow fadeIn" data-wow-delay="0.2s">
91  　　　略
92      </div>
93      <div class="col-sm-12 col-md-6 benefit wow fadeIn" data-wow-delay="0.3s">
94  　　　略
95      </div>
96      <div class="col-sm-12 col-md-6 benefit wow fadeIn" data-wow-delay="0.4s">
97 　　　　略
98      </div>
99      <div class="col-sm-12 col-md-6 benefit wow fadeIn" data-wow-delay="0.5s">
100  　　　略
101      </div>
102    </div>
103  </div>
104  <!--Experiences-->
105  <div class="container-fluid padding experience">
106    <div class="row">
107      <div class="col-12">
108        <h2>Our Experiences</h2>
109        <h4>July 2017 - June 2019</h4>
110      </div>
111    </div>
112    <div class="row mt-5 text-center" id="counter-block">
113      <div class="col-sm-12 col-md-4 exp">
114         <h5>Experience 1</h5>
115         <div class="counts"><h4><span class="loaded"></span> m&sup3;</h4></div>
116         <p>Sentence sentence sentence</p>
117      </div>
118      <div class="col-sm-12 col-md-4 exp">
119         <h5>Experience 2</h5>
120         <div class="counts"><h4><span class="imported"></span> items</h4></div>
121         <p>Sentence sentence sentence</p>
122      </div>
123      <div class="col-sm-12 col-md-4 exp">
124         <h5>Experience 3</h5>
125         <div class="counts"><h4><span class="custom"></span> cases</h4></div>
126         <p>Sentence sentence sentence</p>
127      </div>
128    </div>
129  </div>
130  <!--About-->
131  <div class="container-fluid padding" id="about">
132    <div class="row">
133      <div class="col-12">
134        <h4>About Us
135          <br>
136          <br><span>Sentence sentence sentence</span></h4>
137          <p>Sentence sentence sentence</p>
138       </div>
139      <div class="col-12">
140        <table class="table table-dark table-borderless">
141          <thead>
142            <tr>
143              <th scope="col"></th>
144              <th scope="col"></th>
145            </tr>
146          </thead>
147          <tbody>
148               省略
149            </tbody>
150        </table>
151      </div>
152    </div>
153    <div class="row text-center">
154      <div class="col-12">
155      <a class="btn btn-primary btn-lg my-3 wow fadeInRight" href="#" role="button">Contact Us</a>
156      </div>
157    </div>
158  </div>
159  <!--Footer-->
160  <footer>
161  <div class="container-fluid">
162    <div class="row">
163      <div class="col-4 col-md-3 text-center">
164          <img src="../img/logo.png" alt="logo">
165      </div>
166      <div class="col-8 col-md-5">
167          <div class="info">
168            <h4>Company</h4>
169            <p>Address</p>
170            <div class="contact-info">
171              <h4><i class="fas fa-phone"></i>&nbsp;00-0000-0000</h4>
172              <h4><i class="fas fa-envelope"></i>&nbsp;hogehoge@com</h4>
173            </div>
174          </div>
175      </div>
176      <div class="col-12 col-md-4 text-center">
177        <ul class="footer-menu">
178　　　　　　　　省略
179        </ul>
180      </div>
181    </div>
182    <div class="row text-center pt-3">
183      <div class="col-12">
184        <p>Copyright &copy; 2020 Company </p>
185      </div>
186    </div>
187  </div>
188  </footer>
189
190
191</body>
192</html>

CSS
1@charset "utf-8";
2* { 
3    margin: 0px; 
4    padding: 0px; 
5}
6body:lang(en) {
7  font-family: 'FranklinGothic URW','Avenir','Helvetica Neue','Hiragino Sans','Yu Gothic','MS PGothic','sans-serif';
8}
9body:lang(zh-cmn-Hans) {
10  font-family: "微软雅黑体", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
11}
12body p, body td, body dt {
13  font-family:"微软雅黑体", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
14}
15body p {
16  color: #5f5f5f;
17}
18/*General*/
19h1 {
20  font-size: 3rem;
21}
22span {
23  font-weight: bold;
24}
25.padding {
26  padding: 4rem
27}
28.blue-bg {
29  background-color: #2A4273;
30}
31/*Navigation*/
32.nav {
33  margin-top: 0;
34  display: block;
35}
36.bg-dark {
37  background-color: #2A4273 !important;
38}
39.navbar-brand {
40  margin-right: 0;
41}
42.navbar-brand img {
43  width: 90px;
44}
45.languages .nav-item {
46  padding-left: 2rem;
47}
48#navbarResponsive .nav-item {
49  padding-left: 3rem;
50  font-size: 1.3rem;
51}
52/*Top*/
53.message {
54  background-image: url(../img/top-japan.jpg);
55  background-position: center;
56  background-repeat: no-repeat;
57  background-size: cover;
58  background-blend-mode:darken;
59  background-color: rgba(42,66,115,0.6);
60  margin-bottom: 0;
61  height: 400px;
62}
63.top {
64  color: white;
65  padding: 7rem 1rem;
66  text-shadow: 1px 1px 2px black;
67}
68.top h4 {
69  font-style: italic;
70}
71/*Services*/
72.service-heading {
73  color: #2A4273;
74}
75.service-heading h2 {
76  font-style: italic;
77  display: inline-block;
78  border-bottom: solid 5px #F2D25F;
79}
80.services {
81  margin-top: 3rem;
82}
83.service-box {
84  margin: 2rem;
85}
86.services span {
87  margin-bottom: 1.5rem;
88}
89.circle {
90  border-radius: 100%;
91  background-color: #2A4273;
92}
93.icon {
94  display: inline-block;
95  text-align: center;
96  position: relative;
97  font-size: 60px;
98  width: 120px;
99  height: 120px;
100}
101.icon i {
102  color: white;
103  line-height: 120px;
104  position: relative;
105  z-index: 1;
106}
107.fas, .fab {
108  display: inline-block;
109  font: normal;
110  font-size: inherit;
111  text-rendering: auto;
112}
113/*Benefits*/
114.benefits {
115  color: white;
116}
117.benefit-text h2, .benefit-text p {
118  color: white;
119}
120.benefit {
121  padding: 2rem;
122}
123.benefit-icon {
124  font-size: 60px;
125  width: 100px;
126  height: 100%;
127  float: left;
128}
129/*Experiences*/
130.experience {
131  color: #2A4273;
132}
133.experience h2 {
134  display: inline-block;
135  border-bottom: solid 5px #F2D25F;
136}
137.experience span {
138  font-weight: bold;
139}
140.counts {
141  padding-top: 1.8rem;
142}
143.counts span {
144  font-size: 65px;
145  font-weight: bold;
146  font-style: italic;
147}
148.experience p {
149  color: #5F5F5F;
150}
151/*About*/
152#about {
153  color: white;
154  background-image: url(../img/port.jpg);
155  background-position: center;
156  background-repeat: no-repeat;
157  background-size: cover;
158  background-blend-mode:darken;
159  background-color: rgba(42,66,115,0.75);
160  margin-bottom: 0;
161  height: 100%;
162}
163#about p {
164  color: white;
165  font-weight: lighter;
166}
167.table-dark {
168  background-color: rgba(0,0,0,0);
169}
170table a {
171  color: white;
172}
173.table th, .table td {
174  padding-left: 0;
175}
176/*button*/
177.btn {
178  border: none;
179  color: #2A4273;
180  border-radius: 0px;
181}
182.btn:hover {
183  opacity: 0.8;
184  color: #2A4273;
185  transition: all .3s;
186}
187.btn-primary {
188  background-color: #F2D25F!important;
189}
190.btn-lg {
191  width: 15rem;
192  box-shadow: 0 3px 3px #00000029;
193}
194/*Footer*/
195footer {
196  background-color: #323336;
197  padding-top: 2rem;
198}
199footer h4, footer p {
200  color: white;
201}
202footer h4 {
203  font-size: 15px;
204}
205footer p {
206  font-size: 12px;
207}
208.contact-info h4 {
209  display: inline-block;
210  float: left;
211  padding-right: 1rem;
212}
213footer ul {
214  list-style: none;
215}
216footer a {
217  color: white;
218}
219footer img {
220  width: 120px;
221}
222

kei344

2020/06/09 04:42

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）を質問文に追記されたほうが回答を得やすいと思います。

ah6BD2gZo5GnjnT

2020/06/12 11:49

ソースコードが用意されていないので、何とも言えないのですが、仮にその部分が親要素であれば、子要素に当たる部分がインライン要素であるならば、cssでvertical-align: bottom;と設定してあげると上手く機能するかもしれません。もしくは中の要素をdisplay:blockに指定すると上手く行くかも。以下参考サイト https://coliss.com/articles/build-websites/operation/css/6-cases-of-unwanted-spaces-in-page-layout-by-demosthenes.html

aya_datzii

2020/06/16 03:32

コードを追記しました、よろしくお願いいたします。

kei344

2020/06/16 15:21

提示されたコードでWindows/Chromeで問題が再現しませんでした。 https://jsfiddle.net/n5c4vd3t/ このリンク（右下）で問題が再現しますか？

aya_datzii

2020/06/16 15:44 編集

ありがとうございます、いただいたリンクでは問題が発生しませんでした。しかしhead内を追記すると問題が発生します。　head内を以下に追記します。（本文では文字数オーバーになってしまうので、すみません。） <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>TItle title</title> <meta name="description" content=""/> <meta name="robots" content="noindex,nofollow"/> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.1/css/all.css"> <link href="../css/style.css" rel="stylesheet"> <link href="../css/animate.css" rel="stylesheet"> <script src="../dist/wow.min.js"></script> <script>new WOW().init();</script> </head>

kei344

2020/06/16 15:51

質問タグに「bootstrap」を追加し、その他使用しているライブラリについては公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

aya_datzii

2020/06/16 15:56

ありがとうございます。ライブラリURLは明日追記します。