diff --git a/src/App.css b/src/App.css
index a0846ca..e6fb8d6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -190,7 +190,7 @@
   color: #000000;
   padding: 10px;
   border-radius: 15px;
-  width: 80%;
+  width: 100%;
   margin-right: 5px;
   border: 1px solid #000000;
 }
diff --git a/src/components/location-list.tsx b/src/components/location-list.tsx
index 746c859..ca9abf6 100644
--- a/src/components/location-list.tsx
+++ b/src/components/location-list.tsx
@@ -75,14 +75,12 @@ const LocationList = ({ onCitySelect }: LocationListProps) => {
           display: "flex",
           flexDirection: "row",
           justifyContent: "space-between",
-          width: "80%",
-          marginBottom: "10px",
+          width: "70%",
         }}
       >
         <span style={{ fontWeight: "bold" }}>City</span>
         <span style={{ fontWeight: "bold" }}>Next 3 Days</span>
       </div>
-      <hr style={{ width: "80%", marginBottom: "10px" }} />
 
       <ul
         style={{
@@ -91,12 +89,17 @@ const LocationList = ({ onCitySelect }: LocationListProps) => {
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
+          justifyContent: "center",
           width: "100%",
         }}
       >
         {cityWeather.map((item) => (
-          <div onClick={() => onCitySelect(item.name || "")}>
-            <ListItem key={item.name} city={item} />
+          <div
+            onClick={() => onCitySelect(item.name || "")}
+            key={item.name}
+            style={{ width: "80%" }}
+          >
+            <ListItem city={item} />
           </div>
         ))}
       </ul>