メニューバーと画像の間に空白ができてしまいます

メニューバーと画像の間に空白ができてしまいます。
画像がなぜか下がった状態になってしまいます。
青いメニュバーと風景画像の隙間の白い空白です

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>AAAA</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <meta name="description" content="株式会社AAAのホームページです。">
8    <meta name="keywords" content="AAAA">
9    <link rel="stylesheet" href="css/menu.css">
10    <link rel="stylesheet" href="css/anime.css">
11
12    <header style="background-image:url(image/header.jpg)">
13      <nav class="fix">
14       <div class="inner flex">
15         <div class="logo">
16           <a>AAA</a>
17         </div>
18
19         <div class="menu">
20           <ul class="flex">
21             <li class="list"><a href="">MANUFACTURING</a></li>　
22             <li class="list"><a href="">PRODUCT</a></li>　
23             <li class="list"><a href="">COMPANY</a></li>　
24             <li class="list"><a href="">RECRUIT</a></li>　
25             <li class="list"><a href="">CONTACT</a></li>　
26           </ul>
27         </div>
28     </nav>
29
30     <body>
31      <p class="menuchar">AAAAA CO.Ltd.</p>
32     </body>
33
34    <footer class="site-footer">
35    </footer>
36
37
38  </head>
39<body>
40
41  </body>
42</html>
43

css
1/*メニューバーに関連するもの*/
2
3*{
4 border: 0;
5 margin: 0;
6 padding: 0;
7}
8
9header {
10	background: url(../image/header.jpg) center / cover;/*headerに挿入する画像/ホーム画面*/
11	position: relative;
12	height: 110vh;/*縦の長さ*/
13}
14
15nav{
16 background-color:#81bcd8;/*メニューバーの背景色指定*/
17 height:100px;/*メニューバーの縦の大きさ*/
18 width: 100%;/*メニューバーの横幅*/
19 position: fixed;/*メニューバー固定*/
20 top: 0;/*メニュバーの始まりの位置*/
21 left:0;/*メニュバーの始まりの位置*/
22}
23
24.inner{
25 max-width:100%;/*領域幅の最大値*/
26 margin:0px auto;
27 width:90%;/*横幅の指定*/
28}
29nav>.flex{
30  align-items: center;/*子要素のアイテムを中央に寄せる*/
31  height:100px;/*メニューの文字位置の高さ*/
32}
33.flex {
34  display: flex;/*メニューバー並列化*/
35  justify-content: space-between;/*メニューバーの要素をアイテムを均等に配置する*/
36}
37
38.flex li{
39  margin-left:30px;
40  list-style:none;/*リスト化の黒丸を消す*/
41}
42.logo a{
43 color:#000000;/*文字色*/
44 font-size:35px;/*文字サイズ*/
45 font-weight:bold;/*太文字*/
46}
47li a{
48  color:#000000;/*文字色*/
49  font-size: 28px;
50  text-decoration:none;/*下線を消す*/
51}
52
53.menuchar {/*画像の中の文字*/
54  color: #FFFFFF;/*文字色*/
55  font-size: 140px;/*文字の大きさ*/
56  font-style: normal;/*文字スタイル*/
57  text-align: left;/*文字のスタート位置*/
58  margin: 400px 0px 0px 90px;/*野路の位置指定*/
59
60}

](698738a98bab43514b1009deacd3361b.png)

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

回答1件

ベストアンサー

.menuchar {/*画像の中の文字*/
  color: #FFFFFF;/*文字色*/
  font-size: 140px;/*文字の大きさ*/
  font-style: normal;/*文字スタイル*/
  text-align: left;/*文字のスタート位置*/
 /* margin: 400px 0px 0px 90px;/*野路の位置指定*/
}

投稿2020/06/15 07:10