fixed issue by modifying css of wrapper and using h3 for subtitle

Signed-off-by: faatima_abidi <[email protected]>

Author: FaatimaAbidi

src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js

@@ -1,7 +1,15 @@
 import styled from "styled-components";
 export const ProgramsPageWrapper = styled.div`
-    
-    margin-top: -2rem;
+
+    h3 {
+        color: ${(props) => props.theme.whiteSixToGreen3C494F};
+        margin: 0;
+        padding: 0;
+        font-weight: 500;
+        text-align: center;
+        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+
     h1{
         color: ${props => props.theme.text};
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);

src/sections/Careers/Careers-Programs-grid/index.js

@@ -57,7 +57,8 @@ const ProgramsGrid = ({ hide_path, sub_section }) => {
 
   return (
     <ProgramsPageWrapper>
-      <PageHeader title="Open Source Internship Programs" subtitle="Build Your Career at Layer5" path={path} />
+      <PageHeader className="title" title="Open Source Internship Programs" path={path} />
+      <h3>Build Your Career at Layer5</h3>
       <div className={sub_section ? "sub-header_wrapper" : "programs-page-wrapper"}>
         <Container>
           <div className="program-grid-wrapper">