Adjust paddings

components/BVSRTimeline.tsx

@@ -13,7 +13,7 @@ export default async function BVSRTimeline({ lng }: { lng: string }) {
   const { t } = await useTranslation(lng, "history");
 
   return (
-    <div className="container flex flex-col gap-2">
+    <div className="container flex flex-col gap-2 px-4">
       <h2 className="text-2xl">{t("history")}</h2>
 
       <Timeline>

components/HeroContent/HeroContent.tsx

@@ -6,13 +6,13 @@ export default async function HeroContent({ lng }: { lng: string }) {
   return (
     <div
       className={
-        "relative h-[700px] bg-cover bg-center bg-no-repeat text-white"
+        "relative flex min-h-[700px] w-full flex-col items-center bg-cover bg-center bg-no-repeat text-white"
       }
       style={{
         backgroundImage: `url(${backgroundImage.src})`,
       }}
     >
-      <div className="flex flex-col items-center px-32 py-16">
+      <div className="container flex flex-col items-center px-8 py-16">
         <Image
           height={132}
           width={240}
@@ -26,11 +26,11 @@ export default async function HeroContent({ lng }: { lng: string }) {
           <br />
           studentischer Raumfahrt
         </h1>
-        <span className={"mt-16 text-center text-2xl"}>
+        <div className={"mt-8 text-center text-2xl"}>
           {lng == "de"
             ? "Der Bundesverband studentischer Raumfahrt (BVSR) repräsentiert deutsche Studentengruppen involviert in Weltraumprojekten auf einem nationalen Level"
             : "The Bundesverband studentischer Raumfahrt (BVSR) represents German student groups involved in space projects on a national level"}
-        </span>
+        </div>
       </div>
     </div>
   );

components/layout/BVSRNavbar.tsx

@@ -18,19 +18,19 @@ export default async function BVSRNavbar({ lng }: { lng: string }) {
 
   return (
     <Navbar fluid>
-      <div className="flex items-center gap-8">
+      <div className="flex flex-col items-center gap-8 md:flex-row">
         <NavbarBrand href="https://bvsr.space">
           <Image
             src={bvsrLogo}
-            className="mr-2 h-8 w-16 object-cover"
+            className="mr-2 h-10 w-20 object-cover"
             alt="BVSR Logo"
           />
           <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
             BVSR
           </span>
         </NavbarBrand>
         <NavbarCollapse>
-          <div className="relative flex items-center gap-4">
+          <div className="relative flex flex-col items-center gap-4 md:flex-row">
             <Dropdown
               inline
               label={
@@ -65,7 +65,7 @@ export default async function BVSRNavbar({ lng }: { lng: string }) {
           </div>
         </NavbarCollapse>
       </div>
-      <div className="flex">
+      <div className="self-start md:self-center flex items-center gap-2">
         <Language lng={lng} />
         <NavbarToggle />
       </div>

components/members/Members.tsx

@@ -30,7 +30,7 @@ export default async function Members({ lng }: { lng: string }) {
      */
 
   return (
-    <div className="container flex flex-col gap-2">
+    <div className="container flex flex-col gap-2 px-4">
       <h2 className="text-2xl">{t("members")}</h2>
 
       <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">

components/members/Sponsors.tsx

@@ -6,7 +6,7 @@ export default async function Sponsors({ lng }: { lng: string }) {
   const { t } = await useTranslation(lng, "sponsors");
 
   return (
-    <div className="container flex flex-col gap-2">
+    <div className="container flex flex-col gap-2 px-4">
       <h2 className="text-2xl">{t("title")}</h2>
 
       <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">