diff --git a/src/components/SectionNav.spec.tsx b/src/components/SectionNav.spec.tsx
index a28b3445..85d269d6 100644
--- a/src/components/SectionNav.spec.tsx
+++ b/src/components/SectionNav.spec.tsx
@@ -3,40 +3,40 @@ import renderer from 'react-test-renderer';
 
 describe('SectionNav', () => {
 
-    const childrenListWithKeys = [
-        <button key='1'>Slide 1</button>,
-        <button key='2'>Slide 2</button>,
-        <button key='3'>Slide 3</button>,
-        <button key='4'>Slide 4</button>,
-        <button key='5'>Slide 5</button>,
-    ];
+  const childrenListWithKeys = [
+    <button key='1'>Slide 1</button>,
+    <button key='2'>Slide 2</button>,
+    <button key='3'>Slide 3</button>,
+    <button key='4'>Slide 4</button>,
+    <button key='5'>Slide 5</button>,
+  ];
 
-    const handlePrev = jest.fn();
-    const handleNext = jest.fn();
+  const handlePrev = jest.fn();
+  const handleNext = jest.fn();
 
-    it('matches snapshot', () => {
-        const tree = renderer.create(
-            <SectionNav 
-                handlePrevArrow={handlePrev} 
-                handleNextArrow={handleNext}
-            >
-                {childrenListWithKeys}
-            </SectionNav>
-        ).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
+  it('matches snapshot', () => {
+    const tree = renderer.create(
+      <SectionNav
+        handlePrevArrow={handlePrev}
+        handleNextArrow={handleNext}
+      >
+        {childrenListWithKeys}
+      </SectionNav>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 
-    it('matches snapshot when arrows are disabled', () => {
-        const tree = renderer.create(
-            <SectionNav 
-                handlePrevArrow={handlePrev} 
-                handleNextArrow={handleNext}
-                isPrevArrowDisabled
-                isNextArrowDisabled
-            >
-                {childrenListWithKeys}
-            </SectionNav>
-        ).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
+  it('matches snapshot when arrows are disabled', () => {
+    const tree = renderer.create(
+      <SectionNav
+        handlePrevArrow={handlePrev}
+        handleNextArrow={handleNext}
+        isPrevArrowDisabled
+        isNextArrowDisabled
+      >
+        {childrenListWithKeys}
+      </SectionNav>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/src/components/SectionNav/styles.ts b/src/components/SectionNav/styles.ts
index 55a42b9a..2297dc2d 100644
--- a/src/components/SectionNav/styles.ts
+++ b/src/components/SectionNav/styles.ts
@@ -21,7 +21,7 @@ export const SectionNavWrapper = styled.div`
 export const SectionNavGroup = styled.div`
   flex: 0 0 auto;
   &:not(:last-child) {
-    margin-right: 1rem;
+    margin-right: 0.8rem;
   }
 `;
 
diff --git a/src/components/__snapshots__/SectionNav.spec.tsx.snap b/src/components/__snapshots__/SectionNav.spec.tsx.snap
index 39d9c024..3754644f 100644
--- a/src/components/__snapshots__/SectionNav.spec.tsx.snap
+++ b/src/components/__snapshots__/SectionNav.spec.tsx.snap
@@ -27,35 +27,35 @@ exports[`SectionNav matches snapshot 1`] = `
     className="sc-gsnTZi hTCAIx"
   >
     <div
-      className="sc-dkzDqf hSvdjQ"
+      className="sc-dkzDqf Deoej"
     >
       <button>
         Slide 1
       </button>
     </div>
     <div
-      className="sc-dkzDqf hSvdjQ"
+      className="sc-dkzDqf Deoej"
     >
       <button>
         Slide 2
       </button>
     </div>
     <div
-      className="sc-dkzDqf hSvdjQ"
+      className="sc-dkzDqf Deoej"
     >
       <button>
         Slide 3
       </button>
     </div>
     <div
-      className="sc-dkzDqf hSvdjQ"
+      className="sc-dkzDqf Deoej"
     >
       <button>
         Slide 4
       </button>
     </div>
     <div
-      className="sc-dkzDqf hSvdjQ"
+      className="sc-dkzDqf Deoej"
     >
       <button>
         Slide 5
@@ -111,35 +111,35 @@ exports[`SectionNav matches snapshot when arrows are disabled 1`] = `
     className="sc-gsnTZi hTCAIx"
   >
     <div
-      className="sc-dkzDqf hSvdjQ"
+      className="sc-dkzDqf Deoej"
     >
       <button>
         Slide 1
       </button>
     </div>
     <div
-      className="sc-dkzDqf hSvdjQ"
+      className="sc-dkzDqf Deoej"
     >
       <button>
         Slide 2
       </button>
     </div>
     <div
-      className="sc-dkzDqf hSvdjQ"
+      className="sc-dkzDqf Deoej"
     >
       <button>
         Slide 3
       </button>
     </div>
     <div
-      className="sc-dkzDqf hSvdjQ"
+      className="sc-dkzDqf Deoej"
     >
       <button>
         Slide 4
       </button>
     </div>
     <div
-      className="sc-dkzDqf hSvdjQ"
+      className="sc-dkzDqf Deoej"
     >
       <button>
         Slide 5