Saya mengikuti tutorial YouTube tentang cara membuat bar navigasi responsif pada HTML menggunakan CSS dan semuanya berjalan lancar sehingga saya cuba menambah teks di tengah skrin dan ia muncul di sebelah kiri skrin (hanya jika resolusi tetingkap lebih tinggi daripada 952px jam lebar). Saya sangat baru dengan CSS dan semua yang saya cuba perbaiki nampaknya tidak berkesan. Kodnya adalah seperti berikut

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body {
  font-family: montserrat;
}

nav {
  background: #0082e6;
  height: 80px;
  width: 100%;
}

label.logo {
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 100px;
  font-weight: bold;
}

nav ul {
  float: right;
  margin-right: 20px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a {
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}

a.active,
a:hover {
  background: #1b9bff;
  transition: .5s;
}

.checkbtn {
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}

#check {
  display: none;
}

@media (max-width: 952px) {
  label.logo {
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a {
    font-size: 16px;
  }
}

@media (max-width: 858px) {
  .checkbtn {
    display: block;
  }
  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2c3e50;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li {
    display: block;
  }
  nav ul li a {
    font-size: 20px;
  }
  a:hover,
  a.active {
    background: none;
    color: #0082e6;
  }
  #check:checked~ul {
    left: 0;
  }
}

section {
  background: url(bg1.jpeg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
  opacity: 20%;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<meta charset="utf-8">
<meta name="viewport" content="width=device-widht,initial-sclae=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/.js" crossorigin="anonymous"></script>
<nav>
  <input type="checkbox" id="check">
  <label for="check" class="checkbtn">
                <i class="fas fa-bars"></i>
            </label>
  <label class="logo">Air</label>
  <ul>
    <li><a href='home.html'>Home</a></li>
    <li><a href='About.html'>About</a></li>
    <li><a href='Flights.html'>Flights</a></li>
    <li><a href='Contact.html'>Contact</a></li>
  </ul>
</nav>
<section>
  <h1 style="text-align:center;">test</h1>
</section>