I have the following Problem. I want my whole site to fit on a screen (no scrolling needed) and split into right/left. On the top I want some kind of header with links to the subpages, something like this:
I tried using flex-col but then I have the problem that I either have the links only on one half of the page or that I have the grey on the whole width.
<body class="font-mono"><div class="p-4 flex flex-wrap justify-between gap-x-2 text-sm"><a href="/link1.html" class="hover:underline">Link1</a><a href="/link2.html" class="hover:underline">Link2</a> ...</div><div class="h-screen flex flex-col md:flex-row"><div class="md:w-1/2 w-full flex flex-col justify-center items-end p-10 space-y-5"><a>Text...</a></div><div class="md:w-1/2 w-full flex flex-col justify-center items-start p-10 bg-gray-100"><a>Text...</a></div></div></body>I also tried using two flex-col, but then my problem is that the links are not any more centred, i.e. with 3 links I have the problem that the second one is not in the middle.
Now my question is, is there a way to make some kind of box over the two columns that just sticks to the top of the page (functioning as some kind of header)?