Header Padding Update (#59)

# Problem

We needed to be able to control the padding on the header to align with
other content.

# Solution

Removed the padding, and added the ability to edit the classes in the
inner header as well.

src/lib/features/Header.stories.svelte

@@ -17,10 +17,10 @@
 
 <!--Primary-->
 <Story name="Primary" id="primary">
-  <Header {menuItems} class="fixed left-0 top-0 w-full" />
+  <Header {menuItems} class="fixed left-0 top-0" innerClass="px-4" />
 </Story>
 
 <!--Logo Link-->
 <Story name="LogoLink">
-  <Header {menuItems} class="fixed left-0 top-0 w-full" logoLink="/" />
+  <Header {menuItems} class="fixed left-0 top-0" innerClass="px-4" logoLink="/" />
 </Story>

src/lib/features/Header.svelte

@@ -3,14 +3,16 @@
   import NavMenu from './NavMenu.svelte';
   import NavMenuMobile from './NavMenuMobile.svelte';
   import { MenuItem } from '$lib/utils/types.js';
+  import { cn } from '../utils/utils.js';
 
   export let logoLink = '';
   export let menuItems: MenuItem[] = [];
   export let highlightMarginTop = '90px';
+  export let innerClass = '';
 </script>
 
-<div class={`header-shadow flex h-[85px] font-title ${$$restProps.class}`}>
-  <div class="m-auto flex h-[85px] w-full max-w-screen-xl justify-between sm:px-f20 md:px-f32">
+<div class={cn('header-shadow flex', $$restProps.class)}>
+  <div class={cn('m-auto flex h-[85px] w-full max-w-screen-xl justify-between font-title', innerClass)}>
     <!-- For Desktop -->
     <a href={logoLink} class={`self-center ${logoLink ? '' : 'pointer-events-none'}`}>
       <FrequencyLogo class="w-[146px] text-teal md:w-[200px]" />