diff --git a/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx b/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx
index eadcef3b36..705c0705c4 100644
--- a/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx
+++ b/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx
@@ -35,7 +35,6 @@ export const TableHeaderRow: HeaderComponent = ({
   const { expandable, selectable, onSelect, onFilter, onSort, prefixId } =
     useControlContext();
   const { variant, listType } = useListContext();
-  const dataTablePadding = listType === 'table' && variant === 'table';
   const headerRowDirections = useListState().query?.sort;
 
   return (
@@ -43,67 +42,68 @@ export const TableHeaderRow: HeaderComponent = ({
       invisible={invisible}
       isDataList={listType === 'table' && variant !== 'table'}
     >
-      <>
-        {selectable && (
-          <ListCol size="content">
-            {!hideSelectAll && (
-              <SelectControl
-                disabled={empty}
-                label="Select All"
-                name={prefixId('all')}
-                rowId="header"
-                selected={selected}
-                onSelect={onSelect}
-              />
-            )}
-          </ListCol>
-        )}
-        {columns.map(({ key, header, sortable, filters, ...colProps }) => {
-          const rowProperty = key as string;
-          const renderKey = prefixId(`header-col-${rowProperty}`);
-          const columnText = String(header || key);
-          const sortDirection = headerRowDirections?.[rowProperty] ?? 'none';
-          const ariaSortDirection =
-            sortDirection === 'none'
-              ? 'none'
-              : sortDirection === 'asc'
-              ? 'ascending'
-              : 'descending';
-
-          return (
-            <ListCol
-              key={renderKey}
-              {...colProps}
-              aria-sort={sortable ? ariaSortDirection : undefined}
-              columnHeader
-              dataTablePadding={dataTablePadding}
+      {selectable && (
+        <ListCol size="content">
+          {!hideSelectAll && (
+            <SelectControl
+              disabled={empty}
+              label="Select All"
+              name={prefixId('all')}
+              rowId="header"
+              selected={selected}
+              onSelect={onSelect}
+            />
+          )}
+        </ListCol>
+      )}
+      {columns.map(({ key, header, sortable, filters, ...colProps }) => {
+        const rowProperty = key as string;
+        const renderKey = prefixId(`header-col-${rowProperty}`);
+        const columnText = String(header || key);
+        const sortDirection = headerRowDirections?.[rowProperty] ?? 'none';
+        const ariaSortDirection =
+          sortDirection === 'none'
+            ? 'none'
+            : sortDirection === 'asc'
+            ? 'ascending'
+            : 'descending';
+        return (
+          <ListCol
+            key={renderKey}
+            {...colProps}
+            aria-sort={sortable ? ariaSortDirection : undefined}
+            columnHeader
+          >
+            <FlexBox
+              alignItems={selectable ? 'center' : 'flex-end'}
+              gap={8}
+              height="100%"
+              width="100%"
             >
-              <FlexBox alignItems="flex-end" gap={8} height="100%" width="100%">
-                {filters && (
-                  <FilterControl
-                    columnKey={rowProperty}
-                    justify={colProps.justify}
-                    options={filters}
-                    onFilter={onFilter}
-                  />
-                )}
-                {sortable ? (
-                  <SortControl columnKey={rowProperty} onSort={onSort}>
-                    {columnText}
-                  </SortControl>
-                ) : (
-                  columnText
-                )}
-              </FlexBox>
-            </ListCol>
-          );
-        })}
-        {expandable && (
-          <ListCol ghost size="content">
-            <ExpandControl />
+              {filters && (
+                <FilterControl
+                  columnKey={rowProperty}
+                  justify={colProps.justify}
+                  options={filters}
+                  onFilter={onFilter}
+                />
+              )}
+              {sortable ? (
+                <SortControl columnKey={rowProperty} onSort={onSort}>
+                  {columnText}
+                </SortControl>
+              ) : (
+                columnText
+              )}
+            </FlexBox>
           </ListCol>
-        )}
-      </>
+        );
+      })}
+      {expandable && (
+        <ListCol ghost size="content">
+          <ExpandControl />
+        </ListCol>
+      )}
     </StyledHeaderRow>
   );
 };
diff --git a/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx b/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx
index 963e552792..817418c6bd 100644
--- a/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx
+++ b/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx
@@ -9,7 +9,6 @@ import {
 import { Text } from '../../..';
 import { ListCol, ListRow } from '../../../List';
 import { ColProps } from '../../../List/elements';
-import { useListContext } from '../../../List/ListProvider';
 import { Shimmer } from '../../../Loading/Shimmer';
 import { ExpandControl, SelectControl } from '../../Controls';
 import { useControlContext } from '../../hooks/useListControls';
@@ -48,10 +47,7 @@ export const TableRow: DataRow = ({
     prefixId,
   } = useControlContext();
 
-  const { variant, listType } = useListContext();
-  const dataTablePadding = listType === 'table' && variant === 'table';
-
-  const listColProps = { dataTablePadding, showOverflow };
+  const listColProps = { showOverflow };
 
   const controlIndices = useMemo(() => {
     const controlIndices = new Map<number, number>();
@@ -113,7 +109,6 @@ export const TableRow: DataRow = ({
           fill,
           type,
         };
-
         if (type === 'control') {
           const controlIndex = controlIndices.get(index) ?? 0;
 
diff --git a/packages/gamut/src/List/ListCol.tsx b/packages/gamut/src/List/ListCol.tsx
index 0aa54bcedc..1397710844 100644
--- a/packages/gamut/src/List/ListCol.tsx
+++ b/packages/gamut/src/List/ListCol.tsx
@@ -27,7 +27,6 @@ export const ListCol = forwardRef<HTMLDivElement, ListColProps>(
         as={colEl}
         columnHeader={columnHeader}
         delimiter={sticky && activeVariants.variant === 'table'}
-        lastChildPadding={!(type === 'expandControl')}
         ref={ref}
         sticky={sticky}
         type={isOrderedHeader ? 'orderedHeader' : type}
diff --git a/packages/gamut/src/List/__tests__/List.test.tsx b/packages/gamut/src/List/__tests__/List.test.tsx
index d6bec4512d..19beb4276d 100644
--- a/packages/gamut/src/List/__tests__/List.test.tsx
+++ b/packages/gamut/src/List/__tests__/List.test.tsx
@@ -61,11 +61,12 @@ describe('List', () => {
       : 'paddingRight';
 
     const { view } = renderView();
+    const rowEl = view.getByRole('listitem');
     const colEl = view.getByText('Hello');
 
     expect(colEl).not.toHaveStyle({ py: 16 });
-    expect(colEl).toHaveStyle({ [paddingLeft]: theme.spacing[8] });
-    expect(colEl).toHaveStyle({ [paddingRight]: theme.spacing[8] });
+    expect(rowEl).toHaveStyle({ [paddingLeft]: theme.spacing[8] });
+    expect(rowEl).toHaveStyle({ [paddingRight]: theme.spacing[8] });
     expect(colEl).not.toHaveStyle({ position: 'sticky' });
   });
 
diff --git a/packages/gamut/src/List/elements.tsx b/packages/gamut/src/List/elements.tsx
index 86d8ee6cb7..6b4abbb4d3 100644
--- a/packages/gamut/src/List/elements.tsx
+++ b/packages/gamut/src/List/elements.tsx
@@ -99,6 +99,9 @@ const interactiveState = states({
 
 const spacingVariants = variant({
   prop: 'spacing',
+  base: {
+    px: { _: 8, c_base: 0, c_sm: 8 },
+  },
   variants: {
     normal: {
       rowGap: { _: 0, c_base: 8, c_sm: 0 },
@@ -110,7 +113,6 @@ const spacingVariants = variant({
       columnGap: { _: 32, c_base: 8, c_sm: 32 },
       gap: { _: 40, c_base: 8, c_sm: 40 },
     },
-
     compact: {
       gap: 0,
       py: 0,
@@ -374,23 +376,6 @@ const columnStates = states({
     whiteSpace: 'normal',
     alignItems: 'flex-end',
   },
-  dataTablePadding: {
-    '&:first-of-type': {
-      pl: 8,
-    },
-    '&:last-of-type': {
-      pr: 8,
-    },
-  },
-  /**
-   * We add this to every RowEl except expandable DataList because it causes a layout shift.
-   * In that case, the padding is instead added directly to the Expandable control.
-   */
-  lastChildPadding: {
-    '&:last-of-type': {
-      pr: 8,
-    },
-  },
   wrap: {
     whiteSpace: 'normal',
   },
@@ -407,9 +392,6 @@ const columnSpacing = variant({
   prop: 'spacing',
   base: {
     px: { _: 0, c_base: 8, c_sm: 0 },
-    '&:first-of-type': {
-      pl: 8,
-    },
   },
   variants: {
     normal: {
@@ -485,6 +467,8 @@ export const StickyHeaderColWrapper = styled.th(
       left: 0,
       zIndex: -1,
     },
+    // p: 0 removes the browser's default padding of 1px
+    p: 0,
     display: 'flex',
     flexShrink: 0,
     position: 'sticky',
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx
index 5bb383969f..2d70635fc1 100644
--- a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
+++ b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
@@ -99,7 +99,7 @@ export const Table: Story = {
 export const Plain: Story = {
   args: { spacing: 'condensed', variant: 'plain' },
   render: (args) => (
-    <Box bg="red" width={1}>
+    <Box width={1}>
       <ListExample {...args} />
     </Box>
   ),