[SOLVED] HTML Text and list centered (Doesnt work because of the underline text)

HTML Text and list centered (Doesnt work because of the underline text)

So I am trying to center my name and navigation bar as you can see looks centered but there is that underline.Navbar

So when I take off text decorate it is centered based on having that line Navbar no text-decorate

Is there a way to get it centered still or should I just avoid using list format for my navigation. I wanted to use it because I want to make my website mobile friendly and it look like that's how you can grouped up the navigation to put it in a menu button.

 <!DOCTYPE html>
    
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Web Builder</title>
    </head>
    
    <body>
      <div class= "container">
          <div class="navbar">
            <div id="name"><span id="coname">Raul Co</span><span id=lname>rrea</span></div>
            
            <nav>
              <ul id="menuList">
                <li><a class="active" href="">Mi Casa</a></li>
                <li><a href="">About Me</a></li>
                <li><a href="">Projects</a></li>
                <li><a href="">Cooking</a></li>
                <li><a href="">Contact</a></li>
              </ul>
            </nav>
            
            <a id="menu" href="#Menu"><span>Menu</span></a>
          </div>
    
      </div>
    
    
    </body>
    
    </html>

CSS Code

*{
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.container{
  overflow: hidden;
  background-color: #908070;
  border: 2px solid blue;
}
.navbar{
  display: flex;
/*   align-items: center; */
  font-size: 1.8em;
}
#name{
  font-family: "Roboto Slab";
  float: left;
  padding-left: 1rem;
}
#coname {
  color: #F58F7C;
}
#lname{
  color: #99B3FF;
}
#menu{
  display:none;
}


nav{
  flex: 1;
  text-align: right;
}
nav ul li{
  list-style: none;
  display: inline-block;
  margin-right: 30px;
}
nav ul li a{
  text-decoration: none;
  color: #707090;
  font-size: 1em;
}

Solution

Well what you could do is, in the CSS file; remove the display: inline-block; in nav ul li and then add this css code:

nav ul {
  display: flex;
  align-items: center;
}

Working Code Sandbox link: https://codesandbox.io/s/priceless-dust-15u18o?file=/style.css:428-478