PCサイズからタブレットサイズ〜スマホサイズへ切り替わる際のヘッダーのデザイン崩れを防ぎたい。

実現したいこと
【PCサイズからタブレットサイズへ画面が小さくなる際のヘッダーの崩れを改善したい】
・ヘッダーメニュの文字がロゴの下に来ないようにしたい
・ヘッダーのライン縦幅が画面サイズに合わせて小さくなるようにしたい。(最終的にはハンバーガーメニューと同じ縦幅になるようにしたい)
・ヘッダーロゴをヘッダーの縦幅に合わせたい(画面サイズを小さくしていくのと合わせて小さくなるようにしたい)
・ヘッダーロゴが画面サイズを小さくしていくと少し右に寄ってくるのを左側で固定したい

毎回のように質問して申し訳ありませんが、宜しくお願い致します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WORLD VOICE</title>
  <link rel="stylesheet" href="css/styles.css" >
  <link rel="stylesheet" href="responsive.css">
  <link rel="icon" href="image/WV favicon.jpg">
</head>
  <script src="https://kit.fontawesome.com/89e110c1af.js" crossorigin="anonymous"></script>
</head>

<body>
  <header>
    <div class="icon"><img src="image/logo.png" alt=""></div>

    <nav>
      <ul>
        <li><a href="#" class="active">TOP</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">講師紹介</a></li>
        <li><a href="#">入会までの流れ</a></li>
        <li><a href="#">料金表</a></li>
        <li><a href="#">過去実績</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
      </nav>
      <div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
  </header>
  <main>
    <img src="image/bg.jpg">
    <div class="text">
      <h2>自分史上、最高の歌声に</h2>
    <h2>声の超専門家集団 </h2>
    <h2>WORLD VOICE</h2>
    <p>世界レベルの歌唱力が身につく最高のアーティストスクール</p>
    </div>
  </main>

  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    $('.menu-toggle').click(function() {
      $('nav').toggleClass('active')
    });
  })
</script>

  <h1>NEWS</h1>
    <section>
      <h1>動画更新情報</h1>

        <section>
          <h2>2020.7.1</h2>
            <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </section>

    <section>
      <h2>2020.6.1</h2>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </section>

    <section>
      <h2>2020.6.1</h2>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </section>

    <section>
      <h2>2020.6.1</h2>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </section>

    <section>
       <h2>2020.6.1</h2>
          <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </section>
  </section>
</section>






  <section class="call-to-action">
    <h1>無料カウンセリングに参加する</h1>
    <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </section>

<footer>
  <div class="footer-list">
    <ul>
      <li><a href="#" class="active">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">WORKS</a></li>
      <li><a href="#">BLOG</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>


  </div>
  <div class="social">
    <i class="fab fa-facebook-f"></i>
    <i class="fab fa-instagram"></i>
    <i class="fab fa-twitter"></i>
    <i class="fab fa-youtube"></i>
  </div>
  <section class="copyright">
    <p>Copyright © 2013 WRLD Co.,Ltd. All Rights Reserved.</p>
    </section>
</footer>
</body>
</html>

body {
  margin: 0;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  background: #5f5f5f;
  height: 80px;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
}

header .icon {
  color: #fff;
  line-height: 50px;
  height: 50px;
  font-size:24px;
  float: left;
  margin-left: 20px;
  font-weight: bold;
}

header nav {
  float: right;
}

header nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}

header nav ul li {
  list-style: none;
  margin-right: 10px;
}

header nav ul li a {
  height: 50px;
  line-height: 50px;
  padding: 15px 20px;
  color: #fff;
  text-decoration: none;
  display: block;
}

header nav ul li a:hover,
header nav ul li a.active {
  color: #000;
  background: #fff;
}

.menu-toggle {
  color: #fff;
  float: right;
  line-height: 50px;
  font-size: 24px;
  cursor: pointer;
  display: none;
}
.text {
  position: absolute;
  top: 30%;
  right: 0;
  width: 40%;
  height: 200px;
  font-family: serif;
  z-index: 1;
  color: yellow;
}

h2 {
  width: 100%;
  font-size: 50px;
  font-weight: bold;
  text-shadow: 0 0 5px;
}

h3 {
  font-size: 20px;
}

main img {
  width: 100%;
}


.copyright {
  display: block;
  color:black;
  font-size: 10px;
  text-align: center;
}

@media (max-width: 991px) {
  header{
    padding: 0 20px;
  }
  .menu-toggle {
    display: block;
  }
  header nav.active{
    left: 0;
  }
  header nav {
    position: absolute;
    width: 100%;
    height: calc(100vh - 50px);
    background: #5f5f5f;
    top: 50px;
    left: -100%;
    transition: 0.5s;
  }
  header nav ul {
    display: block;
    text-align: center;
  }
  header nav ul a {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
  }
  .text {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 0;
  }
  h2 {
    font-size: 25px;
  }
  h3 {
    font-size: 17px;
  }
}

.social {
  margin:0;
}
header .icon img {
  display:block;
  margin: 0;
  padding: 0;
  padding-right:50px;
  height: 100%;
  text-align: left;
}