done?

app/page.tsx

@@ -17,7 +17,7 @@ export default function Home() {
 
   return (
     <main>
-      <div className='mx-auto max-w-xs sm:max-w-md md:max-w-xl text-center'>
+      <div className='mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center'>
         <LocationContext.Provider value={contextValue}>
           <LocationSearch />
           <WeatherNow />

components/DailyCard/CardContainer.tsx

@@ -4,7 +4,7 @@ import DailyCard from "./DailyCard";
 export default function CardContainer(props: {weather: Forecast}) {
     const weather = props.weather;
     return (
-        <div className="flex overflow-scroll justify-center">
+        <div className="p-2 flex overflow-scroll md:justify-center w-full">
         {weather.daily && weather.daily.apparent_temperature_max.map((temp, index) => (
           index > 0 && 
           index < 7 && // Ensure we only render the next 6 days

components/DailyCard/DailyCard.tsx

@@ -8,7 +8,7 @@ export default function DailyCard(props: DailyCardPropType) {
     const weatherCode = props.weatherCode
     const temperature = props.temperature
     return (
-        <div className="m-1 p-2 text-center shadow-md border-slate-200 border-2 rounded">
+        <div className="min-w-28 m-1 p-2 text-center shadow-md border-slate-200 border-2 rounded">
             <WeatherIcon weatherCode={weatherCode}/>
             <DailyTemp temperature={temperature} />
             <DailyTime time={time} />

components/LocationSearch.tsx

@@ -27,7 +27,7 @@ export default function LocationSearch() {
   return (
       <form onSubmit={handleSubmit}>
         <input
-          className="my-4 w-full rounded h-8 px-2 box-border border-2 hover:shadow-md"
+          className="my-4 w-full rounded h-8 px-2 box-border border-2 hover:shadow-md max-w-md"
           id="location"
           name="locationSearch"
           type="text"