remove crazy width restriction

pages/index.tsx

@@ -8,18 +8,18 @@ export default function Home() {
     <>
       <Header />
       <main className="main">
-        <div className="mt-6 sm:text-center lg:text-left">
+        <div className="mt-6 sm:text-center">
           <h1 className="text-xl tracking-tight font-extrabold text-gray-900 sm:text-2xl md:text-3xl">
             <span className="block text-blue-800 xl:inline">Pfadi-Bussle</span>{' '}
             <span className="block xl:inline">
               des Freundeskreis des VCP Rosenfeld e.V.
             </span>
           </h1>
-          <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
+          <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
             Für Lager, Vereinsausflüge, Urlaubsreisen, Umzüge, etc. kann man
             unser Pfadi-Bussle mieten.
           </p>
-          <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
+          <div className="mt-5 sm:mt-8 sm:flex sm:justify-center">
             <div className="rounded-md shadow">
               <Link href="/book">
                 <a className="w-full flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 hover:bg-blue-900 md:py-2 md:text-lg md:px-5">
@@ -28,9 +28,9 @@ export default function Home() {
               </Link>
             </div>
           </div>
-        </div>
-        <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
-          Du hast weiter Fragen melde Dich gerne bei Thomas Ruoff per{' '}
+          <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
+            Du hast weiter Fragen melde Dich gerne bei Thomas Ruoff per
+            <br />
             <a className="link" href="mailto:pfadibussle@mail.id0.link">
               E-Mail
             </a>
@@ -53,6 +53,7 @@ export default function Home() {
               </svg>
             </a>
           </p>
+        </div>
       </main>
       <Footer />
     </>

styles/index.css

@@ -9,16 +9,10 @@
 /* Your own custom utilities */
 
 .wrapper {
-  @apply mx-3 flex flex-col min-h-screen;
+  @apply mx-3 flex flex-col min-h-screen sm:w-10/12 sm:m-auto;
   min-width: 300px;
 }
 
-@screen sm {
-  .wrapper {
-    @apply w-3/4 max-w-xl m-auto;
-  }
-}
-
 .main {
   @apply flex-grow;
 }