fix padding for item and adjacent containers

src/ItemList.js

@@ -114,8 +114,7 @@ function ItemContainer({ children }) {
   return (
     <Box
       p="1"
-      mb="1"
-      mt="1"
+      my="1"
       rounded="lg"
       d="flex"
       alignItems="center"

src/ItemsPanel.js

@@ -22,16 +22,20 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
 
   return (
     <Box color="green.800">
+      <Box px="1">
         <OutfitHeading
           outfitState={outfitState}
           dispatchToOutfit={dispatchToOutfit}
         />
+      </Box>
       <Flex direction="column">
         {loading &&
           [1, 2, 3].map((i) => (
             <Box key={i} mb="10">
               <Delay>
+                <Box px="1">
                   <Skeleton height="2.3rem" width="12rem" />
+                </Box>
                 <ItemListSkeleton count={3} />
               </Delay>
             </Box>
@@ -48,7 +52,9 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
                 }}
               >
                 <Box mb="10">
+                  <Box px="1">
                     <Heading2>{zoneLabel}</Heading2>
+                  </Box>
                   <ItemRadioList
                     name={zoneLabel}
                     items={items}

src/WardrobePage.js

@@ -83,7 +83,7 @@ function WardrobePage() {
             key="search-panel"
             ref={searchContainerRef}
           >
-            <Box px="5" py="5">
+            <Box px="4" py="5">
               <SearchPanel
                 query={searchQuery}
                 outfitState={outfitState}