Refactor layout styles for Header and App components

src/App.jsx

@@ -5,7 +5,7 @@ import Footer from "./components/Footer"
 function App() {
   return <div className="flex flex-col min-h-screen">
     <Header />
-    <main className="flex transition-color-mode px-7 flex-grow bg-surface dark:bg-surface-dark">
+    <main className="flex transition-color-mode p-12 flex-grow bg-surface dark:bg-surface-dark">
       <Outlet />
     </main>
     <Footer />

src/components/Header.jsx

@@ -42,7 +42,7 @@ function Header() {
       ];
     
     return (
-        <div className="transition-color-mode px-7 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
+        <div className="transition-color-mode px-12 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
             <AppTitle />
             <BannerInfo info={userInfo} />
             <Separator />

src/components/LanguageSelector.jsx

@@ -9,7 +9,7 @@ const LanguageSelector = () => {
 
   return (
     <div>
-      <select className='font-body rounded-md bg-secondary dark:bg-secondary-dark' id="language-select" onChange={changeLanguage} value={i18n.language}>
+      <select className='font-body rounded-md bg-secondary dark:bg-secondary-dark focus:outline-none' id="language-select" onChange={changeLanguage} value={i18n.language}>
         <option value="en">English</option>
         <option value="bn">বাংলা</option>
         <option value="hi">हिन्दी</option>

src/pages/Home.jsx

@@ -9,7 +9,7 @@ function Home() {
   const userInformation = getUserInfoFromSession();
 
   return (
-    <div className="py-7 flex flex-grow gap-7">
+    <div className="flex flex-grow gap-7">
       <div className="flex gap-7 flex-col basis-1/3">
         <div className="flex-grow">
           <FormBox title={t('holidayList')} alt={true}>