fix header and upcoming exams disappear and left aligned searchbar

Author: SOMASEKAR17

src/components/PapersCarousel.tsx

@@ -64,7 +64,7 @@ function PapersCarousel() {
 
   return (
       <div className="mt-3 px-4">
-        <p className="my-8 hidden text-center font-play text-lg font-semibold md:block">
+        <p className="my-8 text-center font-play text-lg font-semibold md:block">
           Upcoming Exams
         </p>
 

src/components/screens/Hero.tsx

@@ -6,10 +6,10 @@ import PinnedPapersCarousel from "../PinnedPapersCarousel";
 const Hero = () => {
   return (
     <div id="hero" className="flex flex-col justify-between">
-      <h1 className="mx-auto my-8 hidden text-center font-vipnabd text-3xl font-extrabold md:block">
+      <h1 className="mx-auto my-8 text-center font-vipnabd text-3xl font-extrabold md:block">
         Built by Students for Students
       </h1>
-      <div className="mt-5 px-6">
+      <div className="mt-5 px-[14vw] md:px-6">
         <SearchBar />
       </div>
       <p className="my-8 text-center font-play text-lg font-semibold">