From 5dbcadfa20027f31fd7f83fde7e2d7fea4855f92 Mon Sep 17 00:00:00 2001
From: Shaan Sundar <shaansundar@Shaans-MacBook-Pro.local>
Date: Fri, 14 Jan 2022 15:32:25 +0530
Subject: [PATCH] Header links now center in mobile view

---
 src/blocks/header/dark/a.js  | 8 ++++----
 src/blocks/header/dark/b.js  | 8 ++++----
 src/blocks/header/dark/c.js  | 6 +++---
 src/blocks/header/dark/d.js  | 8 ++++----
 src/blocks/header/light/a.js | 8 ++++----
 src/blocks/header/light/b.js | 8 ++++----
 src/blocks/header/light/c.js | 6 +++---
 src/blocks/header/light/d.js | 8 ++++----
 8 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/blocks/header/dark/a.js b/src/blocks/header/dark/a.js
index 66b7a3d..6dd68e4 100644
--- a/src/blocks/header/dark/a.js
+++ b/src/blocks/header/dark/a.js
@@ -21,10 +21,10 @@ function DarkHeaderA(props) {
           <span className="ml-3 text-xl">Tailblocks</span>
         </a>
         <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
-          <a href className="mr-5 hover:text-white">First Link</a>
-          <a href className="mr-5 hover:text-white">Second Link</a>
-          <a href className="mr-5 hover:text-white">Third Link</a>
-          <a href className="mr-5 hover:text-white">Fourth Link</a>
+          <a href className="mx-2 hover:text-white">First Link</a>
+          <a href className="mx-2 hover:text-white">Second Link</a>
+          <a href className="mx-2 hover:text-white">Third Link</a>
+          <a href className="mx-2 hover:text-white">Fourth Link</a>
         </nav>
         <button className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">
           Button
diff --git a/src/blocks/header/dark/b.js b/src/blocks/header/dark/b.js
index dc3abbf..74b252f 100644
--- a/src/blocks/header/dark/b.js
+++ b/src/blocks/header/dark/b.js
@@ -21,10 +21,10 @@ function DarkHeaderB(props) {
           <span className="ml-3 text-xl">Tailblocks</span>
         </a>
         <nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-700	flex flex-wrap items-center text-base justify-center">
-          <a href className="mr-5 hover:text-white">First Link</a>
-          <a href className="mr-5 hover:text-white">Second Link</a>
-          <a href className="mr-5 hover:text-white">Third Link</a>
-          <a href className="mr-5 hover:text-white">Fourth Link</a>
+          <a href className="mx-2 hover:text-white">First Link</a>
+          <a href className="mx-2 hover:text-white">Second Link</a>
+          <a href className="mx-2 hover:text-white">Third Link</a>
+          <a href className="mx-2 hover:text-white">Fourth Link</a>
         </nav>
         <button className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">
           Button
diff --git a/src/blocks/header/dark/c.js b/src/blocks/header/dark/c.js
index fc01ab9..237352c 100644
--- a/src/blocks/header/dark/c.js
+++ b/src/blocks/header/dark/c.js
@@ -6,9 +6,9 @@ function DarkHeaderC(props) {
     <header className="text-gray-400 bg-gray-900 body-font">
       <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
         <nav className="flex lg:w-2/5 flex-wrap items-center text-base md:ml-auto">
-          <a href className="mr-5 hover:text-white">First Link</a>
-          <a href className="mr-5 hover:text-white">Second Link</a>
-          <a href className="mr-5 hover:text-white">Third Link</a>
+          <a href className="mx-2 hover:text-white">First Link</a>
+          <a href className="mx-2 hover:text-white">Second Link</a>
+          <a href className="mx-2 hover:text-white">Third Link</a>
           <a href className="hover:text-white">Fourth Link</a>
         </nav>
         <a href className="flex order-first lg:order-none lg:w-1/5 title-font font-medium items-center text-white lg:items-center lg:justify-center mb-4 md:mb-0">
diff --git a/src/blocks/header/dark/d.js b/src/blocks/header/dark/d.js
index 3c52cd6..721835c 100644
--- a/src/blocks/header/dark/d.js
+++ b/src/blocks/header/dark/d.js
@@ -21,10 +21,10 @@ function DarkHeaderD(props) {
           <span className="ml-3 text-xl">Tailblocks</span>
         </a>
         <nav className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
-          <a href className="mr-5 hover:text-white">First Link</a>
-          <a href className="mr-5 hover:text-white">Second Link</a>
-          <a href className="mr-5 hover:text-white">Third Link</a>
-          <a href className="mr-5 hover:text-white">Fourth Link</a>
+          <a href className="mx-2 hover:text-white">First Link</a>
+          <a href className="mx-2 hover:text-white">Second Link</a>
+          <a href className="mx-2 hover:text-white">Third Link</a>
+          <a href className="mx-2 hover:text-white">Fourth Link</a>
         </nav>
         <button className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">
           Button
diff --git a/src/blocks/header/light/a.js b/src/blocks/header/light/a.js
index c945f00..5b47101 100644
--- a/src/blocks/header/light/a.js
+++ b/src/blocks/header/light/a.js
@@ -21,10 +21,10 @@ function LightHeaderA(props) {
           <span className="ml-3 text-xl">Tailblocks</span>
         </a>
         <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
-          <a href className="mr-5 hover:text-gray-900">First Link</a>
-          <a href className="mr-5 hover:text-gray-900">Second Link</a>
-          <a href className="mr-5 hover:text-gray-900">Third Link</a>
-          <a href className="mr-5 hover:text-gray-900">Fourth Link</a>
+          <a href className="mx-2 hover:text-gray-900">First Link</a>
+          <a href className="mx-2 hover:text-gray-900">Second Link</a>
+          <a href className="mx-2 hover:text-gray-900">Third Link</a>
+          <a href className="mx-2 hover:text-gray-900">Fourth Link</a>
         </nav>
         <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
           Button
diff --git a/src/blocks/header/light/b.js b/src/blocks/header/light/b.js
index 135ee92..24fa877 100644
--- a/src/blocks/header/light/b.js
+++ b/src/blocks/header/light/b.js
@@ -21,10 +21,10 @@ function LightHeaderB(props) {
           <span className="ml-3 text-xl">Tailblocks</span>
         </a>
         <nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400	flex flex-wrap items-center text-base justify-center">
-          <a href className="mr-5 hover:text-gray-900">First Link</a>
-          <a href className="mr-5 hover:text-gray-900">Second Link</a>
-          <a href className="mr-5 hover:text-gray-900">Third Link</a>
-          <a href className="mr-5 hover:text-gray-900">Fourth Link</a>
+          <a href className="mx-2 hover:text-gray-900">First Link</a>
+          <a href className="mx-2 hover:text-gray-900">Second Link</a>
+          <a href className="mx-2 hover:text-gray-900">Third Link</a>
+          <a href className="mx-2 hover:text-gray-900">Fourth Link</a>
         </nav>
         <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
           Button
diff --git a/src/blocks/header/light/c.js b/src/blocks/header/light/c.js
index 5ef381c..e23f0ec 100644
--- a/src/blocks/header/light/c.js
+++ b/src/blocks/header/light/c.js
@@ -6,9 +6,9 @@ function LightHeaderC(props) {
     <header className="text-gray-600 body-font">
       <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
         <nav className="flex lg:w-2/5 flex-wrap items-center text-base md:ml-auto">
-          <a href className="mr-5 hover:text-gray-900">First Link</a>
-          <a href className="mr-5 hover:text-gray-900">Second Link</a>
-          <a href className="mr-5 hover:text-gray-900">Third Link</a>
+          <a href className="mx-2 hover:text-gray-900">First Link</a>
+          <a href className="mx-2 hover:text-gray-900">Second Link</a>
+          <a href className="mx-2 hover:text-gray-900">Third Link</a>
           <a href className="hover:text-gray-900">Fourth Link</a>
         </nav>
         <a href className="flex order-first lg:order-none lg:w-1/5 title-font font-medium items-center text-gray-900 lg:items-center lg:justify-center mb-4 md:mb-0">
diff --git a/src/blocks/header/light/d.js b/src/blocks/header/light/d.js
index 61ab103..f4e94f8 100644
--- a/src/blocks/header/light/d.js
+++ b/src/blocks/header/light/d.js
@@ -21,10 +21,10 @@ function LightHeaderD(props) {
           <span className="ml-3 text-xl">Tailblocks</span>
         </a>
         <nav className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
-          <a href className="mr-5 hover:text-gray-900">First Link</a>
-          <a href className="mr-5 hover:text-gray-900">Second Link</a>
-          <a href className="mr-5 hover:text-gray-900">Third Link</a>
-          <a href className="mr-5 hover:text-gray-900">Fourth Link</a>
+          <a href className="mx-2 hover:text-gray-900">First Link</a>
+          <a href className="mx-2 hover:text-gray-900">Second Link</a>
+          <a href className="mx-2 hover:text-gray-900">Third Link</a>
+          <a href className="mx-2 hover:text-gray-900">Fourth Link</a>
         </nav>
         <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
           Button