Force columns to be in fixed width

src/App.tsx

@@ -69,8 +69,8 @@ export default function App() {
           
         <div className="flex justify-center">
         <div id="content" className="absolute text-white" style={{ top: `${contentY}px`}}>
-          <div className="grid md:grid-cols-5 gap-2 min-h-[70vh] max-w-3xl">
-            <div className="hidden md:block">
+          <div className="grid grid-container md:grid-cols-5 gap-2 min-h-[70vh] w-4xl">
+            <div className="hidden md:block md:col-span-1">
               <Menu />
             </div>
             <div className="w-full px-5 md:col-span-4 md:px-0">

src/components/Activities.tsx

@@ -2,9 +2,6 @@ export default function Activities() {
     return (
         <>
         <div className="rounded-lg w-full">
-            <h1 className="text-2xl text-center">Recent activities</h1>
-            <div className="border border-white-500"></div>
-
             <ol className="relative border-s border-gray-700 left-2 mt-3">            
                 <li className="mb-2 ms-4">
                     <div className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-gray-900 bg-gray-700"></div>

src/components/Keys.tsx

@@ -2,9 +2,6 @@ export default function Keys() {
     return (
         <>
         <div className="rounded-lg w-full">
-            <h1 className="text-2xl text-center">Public keys</h1>
-            <div className="border border-white-500"></div>
-
             <h2 className="text-xl font-semibold text-gray-200 mt-2 mb-1 ml-1">GNU Privacy Guard</h2>
             <ul className="max-w-md space-y-1 list-disc list-inside text-gray-300 ml-5">
                 <li>

src/components/Links.tsx

@@ -6,7 +6,7 @@ export default function Links() {
     return (
         <>
             <div className="rounded-lg w-full">
-                <div className="gap-x-6 gap-y-8 flex flex-wrap">
+                <div className="gap-x-6 gap-y-8 grid grid-cols-4">
                     <div className="w-24 h-16">
                         <a href="https://x.com/yude_jp">
                             <FontAwesomeIcon className="w-24 h-11" icon={faXTwitter} />

src/components/Menu.tsx

@@ -23,21 +23,41 @@ export default function Menu() {
 
     return (
       <RecoilRoot>
-        <ul className="w-full text-lg font-medium">
-            <li className="w-full px-4 py-2" onClick={() => {setPage(Pages.Profile)}}>
-                <FontAwesomeIcon icon={faUser} />{" "}プロフィール
+        <ul className="w-full text-lg font-medium text-center">
+            <li
+                className={`w-full px-4 py-2${page === Pages.Profile ? " bg-slate-700" : ""}`}
+                onClick={() => {setPage(Pages.Profile)}}
+            >
+                <FontAwesomeIcon icon={faUser} />{" "}
+                <p>プロフィール</p>
             </li>
-            <li className="w-full px-4 py-2" onClick={() => {setPage(Pages.Links)}}>
-                <FontAwesomeIcon icon={faLink} />{" "}リンク
+            <li
+                className={`w-full px-4 py-2${page === Pages.Links ? " bg-slate-700" : ""}`}
+                onClick={() => {setPage(Pages.Links)}}
+            >
+                <FontAwesomeIcon icon={faLink} />{" "}
+                <p>リンク</p>
             </li>
-            <li className="w-full px-4 py-2" onClick={() => {setPage(Pages.Keys)}}>
-                <FontAwesomeIcon icon={faKey} />{" "}公開鍵
+            <li
+                className={`w-full px-4 py-2${page === Pages.Keys ? " bg-slate-700" : ""}`}
+                onClick={() => {setPage(Pages.Keys)}}
+            >
+                <FontAwesomeIcon icon={faKey} />{" "}
+                <p>公開鍵</p>
             </li>
-            <li className="w-full px-4 py-2" onClick={() => {setPage(Pages.Activities)}}>
-                <FontAwesomeIcon icon={faSquarePersonConfined} />{" "}活動
+            <li
+                className={`w-full px-4 py-2${page === Pages.Activities ? " bg-slate-700" : ""}`}
+                onClick={() => {setPage(Pages.Activities)}}
+            >
+                <FontAwesomeIcon icon={faSquarePersonConfined} />{" "}
+                <p>活動</p>
             </li>
-            <li className="w-full px-4 py-2" onClick={() => {setPage(Pages.Services)}}>
-                <FontAwesomeIcon icon={faStar} />{" "}サービス
+            <li
+                className={`w-full px-4 py-2${page === Pages.Services ? " bg-slate-700" : ""}`}
+                onClick={() => {setPage(Pages.Services)}}
+            >
+                <FontAwesomeIcon icon={faStar} />{" "}
+                <p>サービス</p>
             </li>
         </ul>
       </RecoilRoot>

src/components/Profile.tsx

@@ -5,9 +5,6 @@ export default function Profile() {
     return (
         <>
         <div className="rounded-lg w-full">
-            <h1 className="text-2xl text-center">Profile</h1>
-            <div className="border border-white-500"></div>
-
             <h2 className="text-xl font-semibold text-gray-200 mt-2 mb-1 ml-1">Affiliation</h2>
 
             <ol className="relative border-s border-gray-700 left-2">                  
@@ -33,10 +30,13 @@ export default function Profile() {
                     </p>
                     <p className="text-base font-normal text-gray-400">
                         <a href="http://www.cne.info.hiroshima-cu.ac.jp/">
-                            Department of Computer and Network Engineering,
+                            Department of Computer and Network Engineering
+                        </a>
+                    </p>
+                    <p className="text-base font-normal text-gray-400">
+                        <a href="https://www2.info.hiroshima-cu.ac.jp/">
+                            Faculty of Information Sciences
                         </a>
-                        &nbsp;
-                        <a href="https://www2.info.hiroshima-cu.ac.jp/">Faculty of Information Sciences</a>
                     </p>
                 </li>
                 <li className="ms-4">

src/components/Services.tsx

@@ -2,9 +2,6 @@ export default function Services() {
     return (
         <>
         <div className="rounded-lg w-full">
-            <h1 className="text-2xl text-center">Active services</h1>
-            <div className="border border-white-500"></div>
-
             <h2 className="text-xl font-semibold text-gray-200 mt-2 mb-1 ml-1">
                 サービス
             </h2>