どうしてもpage-titleクラスのｈ２の文字の上に余白？空きが出来てしまいます。ヘッダーのすぐ下にｈ２が表示するようにしたいのですが

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

コード
```<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WCB Cafe</title>
  <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
  <link rel ="stylesheet" href="news.css">
  <link rel ="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link href ="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
  <link rel ="icon" type="image/png" href="images/favicon.png"> 
</head>

  <div id ="news" class="big-bg">
    <header class="wrapper">
      <h1><a href="index.html"><img class="logo"src="images/logo.svg" alt="WVBカフェホーム"></a></h1>
      <nav>
        <ul class="main-nav" >
          <li><a href="news.html">news</a></li>
          <li><a href="menu.html">menu</a></li>
          <li><a href="contact.html">contact</a></li>
        </ul>
      </nav>

    </header>
    <div class="wrapper">
      <h2 class="page-title">news</h2>
    </div>
    
    
  </div><!-- /#home -->

</body>
</html>

css

@charset "utf-8";

body {
  font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, "ヒラギノ角ゴ Pro W3", sans-serif;
  line-height:1.7;
  color:#432;
}

html {
  font-size:100%;
}
img {
  max-width:100%;
}

a {
  text-decoration:none;
}
header {
  display:flex;
  justify-content:space-between;
  
}
.wrapper {
  max-width:1100px;
  padding:0 4%;
  margin:0 auto;
}
.logo {
  width:210px;
  margin-top:14px;
}

.main-nav {
  display:flex;
  font-size:1.25rem;
  text-transform:uppercase;
  margin-top:34px;
  list-style:none;
  text-align:right;
}

.main-nav li {
  margin-left:36px;
}
.main-nav a {
  color:#432;
}
.main-nav a:hover {
  color:#0bd;
}

エラーメッセージ

該当のソースコード

ソースコード

試したこと

h2のクラスにposition:absolute;

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

自己解決

vscodeで、ｈ２の上に空きができて昨日から解決できずにいたんですが、
先程htmlのファイルにてhome idタグを option矢印キーでheaderのwrapperクラスと入れ替えてまた戻すというような操作をしたところ、ヘッダーのすぐ下に表示しました。なんなのでしょうかこれは・・時々あるんですこういう事で解決できない時がvscodeのバグのようなものなのでしょうか。考えてくださった方いたら申し訳ありません。

投稿2020/12/26 10:17

beginner

総合スコア10