I can't center align anything on the screen

Question

I'm following a YouTube tutorial on how to make a responsive navigation bar on HTML using CSS and everything was going fine until I tried adding text in the center of the screen and it appeared on the left side of the screen (only if the window resolution is higher than 952px wide). I'm very new to CSS and everything I try to fix it doesn't seem to work. code show as below

* {
  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>

Answer 1

This solved the problem: set the width to just the width of the text, then align the container to the center via margin 0 auto.

test

Answer 2

Add section { Border: 1px solid transparent; } also solves this problem.

See the code snippet below.

* {
  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%;
  border: 1px solid transparent;
}

  
  
  
  
  
  sssccc



  

    
    
        
      
    Air
    

      
Home
      
About
      
Flights
      
Contact
    
  
  

    
test