adjusted gutter sizes and highlight style

pages/deploy/[[...slug]].tsx

@@ -22,6 +22,7 @@ const Deploy = () => {
     <Split
       direction="vertical"
       gutterSize={4}
+      gutterAlign="center"
       sizes={[40, 60]}
       style={{ height: "calc(100vh - 60px)" }}
     >
@@ -33,6 +34,7 @@ const Deploy = () => {
         sizes={[50, 50]}
         minSize={[320, 160]}
         gutterSize={4}
+        gutterAlign="center"
         style={{
           display: "flex",
           flexDirection: "row",

pages/develop/[[...slug]].tsx

@@ -26,6 +26,7 @@ const Home: NextPage = () => {
       direction="vertical"
       sizes={[70, 30]}
       minSize={[100, 100]}
+      gutterAlign="center"
       gutterSize={4}
       style={{ height: "calc(100vh - 60px)" }}
     >

pages/test/[[...slug]].tsx

@@ -357,6 +357,7 @@ const Test = () => {
         direction="vertical"
         sizes={[50, 50]}
         gutterSize={4}
+        gutterAlign="center"
         style={{ height: "calc(100vh - 60px)" }}
       >
         <Flex
@@ -411,6 +412,7 @@ const Test = () => {
             sizes={[50, 50]}
             minSize={[320, 160]}
             gutterSize={4}
+            gutterAlign="center"
             style={{
               display: "flex",
               flexDirection: "row",