fix: layout header flex

src/layout/PageLayout.module.css

@@ -1,3 +1,9 @@
+.header {
+  background-color: white;
+  box-shadow: 0px 4px 4px -2px lightgray;
+  z-index: 1;
+}
+
 .arrow {
   position: absolute;
   transition: all 0.3s;
@@ -7,12 +13,6 @@
   opacity: 0;
 }
 
-.header {
-  background-color: white;
-  box-shadow: 0px 4px 4px -2px lightgray;
-  z-index: 1;
-}
-
 .title {
   font-size: 24px;
   transition: all 0.3s;

src/layout/PageLayout.tsx

@@ -28,16 +28,13 @@ const PageLayout: React.FC = () => {
   return (
     <Layout>
       <Header className={styles.header}>
-        <Row gutter={8}>
+        <Row justify="space-between">
           <Col className={`${styles.arrow} ${hideArrow ? styles.hide : ''}`}>
             <Link to={pathname.slice(0, pathname.lastIndexOf('/'))}>
               <Button type="link" icon={<ArrowLeftOutlined />} />
             </Link>
           </Col>
-          <Col
-            className={`${styles.title} ${hideArrow ? '' : styles.margin}`}
-            flex="1"
-          >
+          <Col className={`${styles.title} ${hideArrow ? '' : styles.margin}`}>
             <Text strong>Woord</Text>
           </Col>
           <Col>