diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8483e8a3280..8975d54f2a2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @primer/components
 
+## 23.2.1
+
+### Patch Changes
+
+- [`a42162c0`](https://github.com/primer/components/commit/a42162c011fa3718a32124b79aecfe306f358298) [#1087](https://github.com/primer/components/pull/1087) Thanks [@emplums](https://github.com/emplums)! - Fix up styles in TabNav allowing for items positioned on the right end of TabNav
+
 ## 23.2.0
 
 ### Minor Changes
diff --git a/package.json b/package.json
index bb674135882..691953fc352 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "23.2.0",
+  "version": "23.2.1",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
diff --git a/src/TabNav.tsx b/src/TabNav.tsx
index 0759d76d203..fd93a9f41cc 100644
--- a/src/TabNav.tsx
+++ b/src/TabNav.tsx
@@ -11,26 +11,25 @@ import * as History from 'history'
 const ITEM_CLASS = 'TabNav-item'
 const SELECTED_CLASS = 'selected'
 
-const TabNavBase = styled.nav<SystemCommonProps & SxProp>`
-  display: flex;
+const TabNavBase = styled.div<SystemCommonProps & SxProp>`
+  margin-top: 0;
   border-bottom: 1px solid ${get('colors.border.gray')};
-
-  .TabNav-body {
-    display: flex;
-    margin-bottom: -1px;
-  }
-
   ${COMMON}
   ${sx}
 `
 
+const TabNavBody = styled.nav`
+  display: flex;
+  margin-bottom: -1px;
+  overflow: auto;
+`
+
 export type TabNavProps = ComponentProps<typeof TabNavBase>
 
-function TabNav({className, children, ...rest}: TabNavProps) {
-  const classes = classnames(className, 'TabNav')
+function TabNav({children, ...rest}: TabNavProps) {
   return (
-    <TabNavBase className={classes} {...rest}>
-      <div className="TabNav-body">{children}</div>
+    <TabNavBase {...rest}>
+      <TabNavBody>{children}</TabNavBody>
     </TabNavBase>
   )
 }
diff --git a/src/__tests__/TabNav.tsx b/src/__tests__/TabNav.tsx
index 0e4f3d231a0..bb0dec20851 100644
--- a/src/__tests__/TabNav.tsx
+++ b/src/__tests__/TabNav.tsx
@@ -25,23 +25,7 @@ describe('TabNav', () => {
     cleanup()
   })
 
-  it('renders a <nav>', () => {
-    expect(render(<TabNav />).type).toEqual('nav')
-  })
-
-  it('adds the TabNav class', () => {
-    expect(rendersClass(<TabNav />, 'TabNav')).toEqual(true)
-  })
-
   it('sets aria-label appropriately', () => {
     expect(render(<TabNav aria-label="foo" />).props['aria-label']).toEqual('foo')
   })
-
-  it('wraps its children in an "TabNav-body" div', () => {
-    const children = <b>children</b>
-    const wrapper = mount(<TabNav>{children}</TabNav>)
-    const body = wrapper.find('.TabNav-body')
-    expect(body.exists()).toEqual(true)
-    expect(body.childAt(0).type()).toEqual('b')
-  })
 })
diff --git a/src/__tests__/__snapshots__/TabNav.tsx.snap b/src/__tests__/__snapshots__/TabNav.tsx.snap
index 42bca19bbc7..1c367579bd1 100644
--- a/src/__tests__/__snapshots__/TabNav.tsx.snap
+++ b/src/__tests__/__snapshots__/TabNav.tsx.snap
@@ -35,26 +35,24 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
 
 exports[`TabNav renders consistently 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  margin-top: 0;
   border-bottom: 1px solid #e1e4e8;
 }
 
-.c0 .TabNav-body {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   margin-bottom: -1px;
+  overflow: auto;
 }
 
-<nav
-  className="c0 TabNav"
+<div
+  className="c0"
 >
-  <div
-    className="TabNav-body"
+  <nav
+    className="c1"
   />
-</nav>
+</div>
 `;