Changes to top navbar

1. in mobile resolutions, the top navbar now justifies towards the center of the screen instead of previously being aligned towards the left
2. the last list item in the top navbar had a border-right which is now omitted.
3. The top navbar has some padding at the bottom to replicate styles of other sections with borders
As discussed in: github/opensource.guide#896

Author: Sidak Singh Aulakh

_includes/nav.html

@@ -2,7 +2,7 @@
 <nav class="main-nav">
   <div class="container-lg mx-auto clearfix">
     <div class="float-sm-right">
-      <ul class="main-links d-flex flex-wrap flex-items-stretch border-left border-bottom border-sm-0 list-style-none">
+      <ul class="main-links d-flex flex-wrap flex-items-stretch flex-justify-center border-left border-bottom border-sm-0 list-style-none">
         <li class="d-inline-block border-right">
           <a class="d-block p-4" href="https://github.com/github/opensource.guide#readme">
             {{ t.nav.about }}
@@ -14,7 +14,7 @@
           </a>
         </li>
         {% if page.lang and site.data.locales.size > 1 %}
-        <li class="d-inline-block border-right">
+        <li class="d-inline-block">
           <div class="p-3">
             <select id="language" class="form-select">
               {% assign locales = site.data.locales | sort %}

assets/css/custom.scss

@@ -62,12 +62,16 @@ blockquote {
   line-height: 0;
 }
 
-.main-links a {
-  &:hover {
-    background: $bg-gray-light;
-    text-decoration: none;
-    color: $gray-dark;
+.main-links {
+  a {
+    &:hover {
+      background: $bg-gray-light;
+      text-decoration: none;
+      color: $gray-dark;
+    }
   }
+  padding-bottom: 5px;
+  padding-top: 5px;
 }
 
 .breadcrumb {