horizontal bar not't aligned on mobile-CodePudding

The navigation bar is centered and horizontal, but for 1024px width, it was aligned but the middle list went up when I adjusted the screen to 640px or lower. I've tried resizing the width and height of the items in the navigation bar but none of them worked. Please help me.

@media screen and (max-width:640px) {
    header {
        border-style: solid;
        color: black;
        }

    h1, h2, h3, section {
        text-align: center;
        }

    nav {
        text-align: center;
        }   

    ul {    
        text-align:center;
        float:left;
        width:100%; 
        padding:0;
        list-style-type:none;
        }
        
    ul li{
        display: inline;
        }
    
    a { 
        display: inline-block;
        width: 150px;
        height: 35px;
        text-decoration:none;
        color:white;
        background-color:#808080;
        border: 1px solid black;
        }
    
    a:hover {
        background-color: black;
    }

<!DOCTYPE html>
        <html lang="en">
        <head>
        <title> General info </title>
        <link href="Desktop.css" rel="stylesheet" />
        <link href="Mobile.css" rel="stylesheet" />
        <meta charset="utf-8" />
        <meta name="description" content="Web Development" />
        <meta name="keywords" content="HTML and CSS" />
        <meta name="author" content="Author" />
        <meta name="viewport" content="width=device- width, initial-scale=1">
        </head>
        <body>

        <div>
        <header> 
        <h1> DTD </h1>
        </header>
        </div>
        
        <div> 
        <nav>
        <ul>
            <li class="divnav"> <a href="Generalinfo.html"> General information </a> </li>
            <li class="divnav"> <a href="Favourites.html"> Achievement and favourites </a> </li>
            <li class="divnav"> <a href="Schedule.html"> Study schedule </a> </li>
        </ul>
        </nav>
        </div>
        </body>
        </html>

This is how it looks.

CodePudding user response：

Use flexbox on your ul

    header {
        border-style: solid;
        color: black;
        }

    h1, h2, h3, section {
        text-align: center;
        }

    nav {
        text-align: center;
        }   

    ul {    
        text-align:center;
        display:flex;
        align-items:center;
        justify-content: center;
        width:100%; 
        padding:0;
        list-style-type:none;
    }
    ul li:not(:last-of-type) {
        margin-right: 5px
    }
        
    ul li{
        display: inline;
        }
    
    a { 
        display: inline-block;
        width: 150px;
        height: 35px;
        text-decoration:none;
        color:white;
        background-color:#808080;
        border: 1px solid black;
        }
    
    a:hover {
        background-color: black;
    }

<!DOCTYPE html>
        <html lang="en">
        <head>
        <title> General info </title>
        <link href="Desktop.css" rel="stylesheet" />
        <link href="Mobile.css" rel="stylesheet" />
        <meta charset="utf-8" />
        <meta name="description" content="Web Development" />
        <meta name="keywords" content="HTML and CSS" />
        <meta name="author" content="Author" />
        <meta name="viewport" content="width=device- width, initial-scale=1">
        </head>
        <body>

        <div>
        <header> 
        <h1> DTD </h1>
        </header>
        </div>
        
        <div> 
        <nav>
        <ul>
            <li class="divnav"> <a href="Generalinfo.html"> General information </a> </li>
            <li class="divnav"> <a href="Favourites.html"> Achievement and favourites </a> </li>
            <li class="divnav"> <a href="Schedule.html"> Study schedule </a> </li>
        </ul>
        </nav>
        </div>
        </body>
        </html>

CodePudding user response：

You can use flexbox on nav and on ul

  nav {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    list-style-type: none;
  }

  @media screen and (max-width:640px) {
  header {
    border-style: solid;
    color: black;
  }
  h1,
  h2,
  h3,
  section {
    text-align: center;
  }
  nav {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    list-style-type: none;
  }
  ul li {
    display: inline;
  }
  a {
    display: inline-block;
    width: 150px;
    height: 35px;
    text-decoration: none;
    color: white;
    background-color: #808080;
    border: 1px solid black;
  }
  a:hover {
    background-color: black;
  }

<div>
  <header>
    <h1> DTD </h1>
  </header>
</div>

<div>
  <nav>
    <ul>
      <li class="divnav"> <a href="Generalinfo.html"> General information </a> </li>
      <li class="divnav"> <a href="Favourites.html"> Achievement and favourites </a> </li>
      <li class="divnav"> <a href="Schedule.html"> Study schedule </a> </li>
    </ul>
  </nav>
</div>

CodePudding user response：

Use this instead of float: left;

ul {
  display: flex;
  justify-content: space-around;
}

CodePudding user response：

How about using display: grid and then setting width of each columns (grid-template-columns: 1fr 1fr 1fr;)?

Have removed @media screen and (max-width:640px) { so that result is viewable in any screen width, please ignore this part alone.

  header {
    border-style: solid;
    color: black;
  }

  h1,
  h2,
  h3,
  section {
    text-align: center;
  }

  nav {
    text-align: center;
  }

  ul {
    text-align: center;
    float: left;
    width: 100%;
    padding: 0;
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  ul li {
    display: block;
    margin: auto 0;
    height:100%;
  }

  a {
    display: block;
    width: 150px;
    height:100%;
    text-decoration: none;
    color: white;
    background-color: #808080;
    border: 1px solid black;
  }

  a:hover {
    background-color: black;
  }

<html lang="en">

<head>
  <title> General info </title>
  <link href="Desktop.css" rel="stylesheet" />
  <link href="Mobile.css" rel="stylesheet" />
  <meta charset="utf-8" />
  <meta name="description" content="Web Development" />
  <meta name="keywords" content="HTML and CSS" />
  <meta name="author" content="Author" />
  <meta name="viewport" content="width=device- width, initial-scale=1">
</head>

<body>

  <div>
    <header>
      <h1> DTD </h1>
    </header>
  </div>

  <div>
    <nav>
      <ul>
        <li class="divnav"> <a href="Generalinfo.html"> General information </a> </li>
        <li class="divnav"> <a href="Favourites.html"> Achievement and favourites </a> </li>
        <li class="divnav"> <a href="Schedule.html"> Study schedule </a> </li>
      </ul>
    </nav>
  </div>
</body>

</html>