navigation bar styling adjustment to be in line with main

vue-theme/src/components/navigation/navigation.vue

@@ -1,57 +1,64 @@
 // Replace with calls to menu system
 <template lang="pug">
-nav.main.f-row.center.between
-    ul.f-row.between
-        li
-            router-link(to="/")
-                h1.t-serif.t-up x
-                    span.t-up &nbsp;logotype
-        li.f-grow
-            p &nbsp;
-        li
-            router-link(:to="`/`")
-                p.t-up home
-        li
-            router-link(:to="`/episodes`")
-                p.t-up pbs series
-        li
-            router-link(:to="`/artists`")
-                p.t-up artists
-        li
-            router-link(:to="`/exhibitions`")
-                p.t-up exhibitions
-        li
-            router-link(:to="`/events`")
-                p.t-up events
-        li
-            router-link(:to="`/center`")
-                p.t-up center
-        li
-            router-link(:to="`/education`")
-                p.t-up education
-        li
-            router-link(:to="`/posts`")
-                p.t-up news
-        li
-            router-link(:to="`/support`")
-                p.t-up support
-        li
-            router-link(:to="`/search`")
-                p.t-up search
+.nav-wrapper.f-row.between.t-up
+    nav.main.f-grow.between
+        ul.f-row.between
+            li
+                router-link(to="/")
+                    h1.t-serif x
+                        span &nbsp;logotype
+            li
+                h5 &nbsp;
+            li
+                router-link(:to="`/`")
+                    h5 home
+            li
+                router-link(:to="`/episodes`")
+                    h5 pbs series
+            li
+                router-link(:to="`/artists`")
+                    h5 artists
+            li
+                router-link(:to="`/exhibitions`")
+                    h5 exhibitions
+            li
+                router-link(:to="`/events`")
+                    h5 events
+            li
+                router-link(:to="`/center`")
+                    h5 center
+            li
+                router-link(:to="`/education`")
+                    h5 education
+            li
+                router-link(:to="`/posts`")
+                    h5 news
+            li
+                router-link(:to="`/support`")
+                    h5 support
+            li
+                router-link(:to="`/search`")
+                    h5 search
 </template>
 
 <style lang="postcss">
 @import '../../sss/variables.sss'
 
-nav.main
-    position: sticky
-    top: 0
-    ul
-        width: $max-width
-        li
-            p
-                color: $cia_black
-            h1
-                font-size: 1.5em
-                color: $cia_red
+.nav-wrapper
+    background-color: green
+    width: 100%
+    nav.main
+        background-color: lightblue
+        max-width: $max-width
+        width: 90%
+        padding: $ms 0
+        align-items: flex-start
+        ul
+            background-color: grey
+            li
+                h5
+                    color: $cia_black
+                h1
+                    font-size: 1.5em
+                    color: $cia_red
 </style>