Need help to get navigation bar in center with text having space around-CodePudding

I am new to HTM/CSS and was trying to create a navigation bar on in header, using flex and when hover it should animate underline from bottom left to right. But I am not able to get it to be placed in center and having spaces around each item.

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>XXXXX</title>
</head>

<body>
<header>
    <div >
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#experience">Experience</a></li>
            <li><a href="#works">Works</a></li>
            <li><a href="#hobbies">Hobbies</a></li>
        </ul>
    </div>
 </header>  
</body>

</html>

CSS code:

*{
    ox-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-color: #333;
    color: #fff;
    font-family: 'Kalam', cursive;
}
header {
    text-align: center;
    align-items: center;
}
.nav a {
    text-decoration: none;
    color: #fff;
    position: relative;
  }

.nav a::after {
    content: "";
    display: block;
    height: 3px;
    width: 0;
    background-color: #fff;
    transition: width 0.3s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
  }

 .nav a:hover::after {
    width: 100%;
  }

.nav li {
    display: inline-flex;  
    justify-content: space-between;
    list-style-type: none;
}

currently I am getting something like this: | About Experience Works Hobbies |

enter image description here

I want output to be like: (having space around) About Experience Works Hobbies

Thank you in advance!

CodePudding user response：

To apply space-around you need to set display: flex; As you can see your a elements that make up the navbar are inside the ul, which in turn is inside the nav class. So what you have to do is set display: flex; to the direct relative of the elements you want to apply it to, in this case ul.

*{
    ox-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-color: #333;
    color: #fff;
    font-family: 'Kalam', cursive;
}
header {
    text-align: center;
    align-items: center;
}
.nav ul {
    display: flex;
    justify-content: space-around;
    align-items:center;
  }

.nav a {
    text-decoration: none;
    color: #fff;
    position: relative;
  }

.nav a::after {
    content: "";
    display: block;
    height: 3px;
    width: 0;
    background-color: #fff;
    transition: width 0.3s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
  }

 .nav a:hover::after {
    width: 100%;
  }

.nav li {
    display: inline-flex;  
    justify-content: space-between;
    list-style-type: none;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>XXXXX</title>
  </head>

  <body>
  <header>
      <div >
          <ul>
              <li><a href="#about">About</a></li>
              <li><a href="#experience">Experience</a></li>
              <li><a href="#works">Works</a></li>
              <li><a href="#hobbies">Hobbies</a></li>
          </ul>
      </div>
   </header>  
  </body>

</html>