fix: navpills alignment to center

.github/workflows/percy.yml

@@ -16,21 +16,24 @@ jobs:
   generate-snapshots:
     runs-on: ubuntu-latest
     steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
+      - name: Check out the repository
+        uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm install
 
-      # Runs a single command using the runners shell
       - name: Run echo script
-        run: echo Starting the screenshot process
+        run: echo "Starting the screenshot process"
 
       - name: Percy Test
         uses: percy/[email protected]
         with:
-          # build-directory: # optional, default is
-          # CLI flags to pass to `percy snapshot`
-          # flags: # optional, default is
-          # Enable verbose logging
-          verbose: true
+          build_directory: '../../'
         env:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
 

css/navbar.css

@@ -42,6 +42,8 @@ nav li a:hover {
   padding: 0;
   overflow: hidden;
   background-color: var(--color-nav);
+  display: flex;
+  align-items: center;
 }
 
 .nav-logo-li {
@@ -54,8 +56,10 @@ nav li a:hover {
 }
 
 .nav-login-li {
-  float: right;
   padding: 0.2rem;
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
 }
 
 .nav-login-li a {