Fix responsiveness issues

components/global-header.tsx

@@ -87,7 +87,7 @@ function MobileMenuLinks() {
 
 export function GlobalHeader() {
   return (
-    <Box bg='gray.900' p='20px 0'>
+    <Box bg='gray.900' p='58px 0 20px'>
       <Container maxW='container.md'>
         <Flex justifyContent='space-between' alignItems='center'>
           <Box>

components/page-header.tsx

@@ -16,13 +16,13 @@ export function PageHeader(props: PageHeaderProps) {
         <Heading
           as='h1'
           color='black'
-          fontSize={['33px', '33px', '40px']}
+          fontSize={['28px', '33px', '40px']}
           fontWeight={700}
           mb={['2px', '2px', '5px']}
         >
           {title}
         </Heading>
-        <Text fontSize={['14px', '14px', '15px']}>{subtitle}</Text>
+        <Text fontSize={['13px', '14px', '15px']}>{subtitle}</Text>
       </Container>
 
       {children && (

components/sticky-banner.tsx

@@ -8,10 +8,17 @@ export function StickyBanner() {
           href={siteConfig.url.youtube}
           bg={'yellow.300'}
           color='gray.900'
+      // bg={'teal.900'}
+      // color='gray.300'
           alignItems='center'
+          position='fixed'
+          left={0}
+          right={0}
+          zIndex={999}
           justifyContent='center'
-          py='7px'
-          _hover={{ textDecoration: 'none', bg: 'yellow.400', }}
+          py='8px'
+          _hover={{ textDecoration: 'none', bg: 'yellow.400' }}
+      // _hover={{ textDecoration: 'none', bg: 'teal.800', color: 'gray.100' }}
           target='_blank'
     >
       <YouTubeLogo style={{ height: '20px', display: 'inline-block', marginRight: '7px' }} />