Bootstrap 5 vertically center aligning elements in navbar-CodePudding

I currently am using bootstrap to create a navbar filled with links. One of the links I have is a button and the button is causing the other links to not vertically align properly.

body{
   
    background: rgb(27, 25, 25);
}


.btn{
    border-radius: 3em;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adam Farrow </title>

    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<link rel="stylesheet" href="data/styles.css" type="text/css">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>

    <nav >
        <div >
            <a href="#" >
                <span >
                    Adam Farrow
                </span>
            </a>
                
            <button  type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" 
            aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>

        <div  id="main-nav">
            <ul >
                <li ><a  href="#">Home</a></li>
                <li ><a  href="#skills-link">Skills</a></li>
                <li ><a  href="#glider">Projects</a></li>
                <li ><a  href="#contact">Contact</a></li>
                <li >
                    <a  href="https://github.com/Adamfarrow1/">Github</a>
                </li>
            </ul>
        </div>
        </div>
    </nav>
    

    <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL jjXkk Q2h455rYXK/7HAuoJl 0I4" crossorigin="anonymous"></script>
</body>
</html>

As you can see if you run the code, it will have the items slightly unaligned.

I have tried using "text-center" on the ul tag surrounding the problem. As well as I tried creating a class and using "top = 50%" for the items inside the list.

CodePudding user response：

use padding-bottom or padding-top : 2px to position your github link