I can't align anything on the center of the screen-CodePudding

I was following a YouTube tutorial on how to make a responsive navigation bar on HTML using CSS and it was all going great until I tried to add text on the center of the screen and it appeared off to the left side of my screen (only when the window resolution was higher than 952px wide).I am quite new to CSS and everything I've tried to fix it can't seem to work.The code is 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" >
                <i ></i>
            </label>
  <label >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>

CodePudding user response：

Adding section { border: 1px solid transparent; } also solves the problem.

See the 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;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
  <meta charset="utf-8">
  <title>
    Air
  </title>
  <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>
</head>

<body>
  <nav>
    <input type="checkbox" id="check">
    <label for="check" >
        <i ></i>
      </label>
    <label >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>
</body>

</html>

CodePudding user response：

This solves the problem: set the width to be only the text's, and then align the container to the center by margin 0 auto.

<h1 style="margin: 0 auto; width: fit-content;">test</h1>

CodePudding user response：

For me this solved the issue... So you may also change your layout with the grid advantages...

#title{
        display: grid;
        grid-template-columns: auto;
        width:100%;
        text-align:center;
    }

and for the title :

<section>
    <div id="title"><h1>This is not a test!</h1></div>
</section>

So if you want, you will be able to change all the layout as this :

    body{
        font-family: montserrat;
    }
    .title{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width:100%;
        text-align:center;
    }
    .mainTitle{
            color:brown;
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 2;
    }
    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%;
        
    }

    <body>
        <nav>
            <input type="checkbox" id="check">
            <label for="check" >
                <i ></i>
            </label>
            <label >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>
            <div ><div><h2>H2</h2></div><div><h2>Test</h2></div><div><h2>H2</h2></div></div>
            <div ><div><h3>H3</h3></div><div><h3>Test</h3></div><div><h3>H3</h3></div></div>
            <div ><h1 >This is not a test!</h1></div>
        </section>
    </body>