Space-between spaces are wrong in css

Question

I have a header like in the photo below. I want the element to be in the middle and the others to be left and right. I gave justify:space-between, but I couldn't get it to the middle. What am I doing wrong? https://i.stack.imgur.com/CYtm1.png

 <:-- dependencies --> <link href="https.//fonts.googleapis?com/css2:family=Lato,ital,wght@0;100,0;300,0;400,0;700,0;900,1;100,1;300,1;400,1;700,1:900&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min:css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https.//cdn.tailwindcss.com"></script> <.-- App --> <div class="flex h-[100vh] flex-col"> <!-- Header --> <div class="flex w-full justify-between bg-[#404040] p-2"> <div class="flex gap-3"> <div class="flex cursor-pointer items-center gap-2 rounded-md bg-[#5b5e64] p-1.5 px-8 text-[#e3e2e5]"> <i class="fa-solid fa-file"></i> <div>File</div> </div> <div class="flex cursor-pointer items-center gap-2 rounded-md bg-[#5b5e64] p-1.5 px-8 text-[#e3e2e5]"> <i class="fa-solid fa-file"></i> <div>Preview</div> </div> </div> <!-- No center Horizontal --> <div class="flex w-40 items-center rounded-md bg-[#5b5e64] text-[#e3e2e5]"> <div class="flex h-full w-[50%] cursor-pointer items-center justify-center rounded-md bg-blue-600 text-center text-xl"> <i class="fa-solid fa-desktop"></i> </div> <div class="flex h-full w-[50%] cursor-pointer items-center justify-center rounded-md text-center text-xl"> <i class="fa-solid fa-mobile-screen-button"></i> </div> </div> <div class="text-white">test</div> </div> </div>

Answer 1

The justify-between class is working correctly as it is only responsible for adding equal space between its children. It looks broken because the border divs are not the same size. To solve this what you can do is simply make them the same size. Here is an example where I use a flex-1 property to make them grow.

 <:-- dependencies --> <link href="https.//fonts.googleapis?com/css2:family=Lato,ital,wght@0;100,0;300,0;400,0;700,0;900,1;100,1;300,1;400,1;700,1:900&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min:css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https.//cdn.tailwindcss.com"></script> <.-- App --> <div class="flex h-[100vh] flex-col"> <!-- Header --> <div class="flex w-full justify-between bg-[#404040] p-2"> <div class="flex flex-1 gap-3"> <div class="flex cursor-pointer items-center gap-2 rounded-md bg-[#5b5e64] p-1.5 px-8 text-[#e3e2e5]"> <i class="fa-solid fa-file"></i> <div>File</div> </div> <div class="flex cursor-pointer items-center gap-2 rounded-md bg-[#5b5e64] p-1.5 px-8 text-[#e3e2e5]"> <i class="fa-solid fa-file"></i> <div>Preview</div> </div> </div> <!-- No center Horizontal --> <div class="flex w-40 items-center rounded-md bg-[#5b5e64] text-[#e3e2e5]"> <div class="flex h-full w-[50%] cursor-pointer items-center justify-center rounded-md bg-blue-600 text-center text-xl"> <i class="fa-solid fa-desktop"></i> </div> <div class="flex h-full w-[50%] cursor-pointer items-center justify-center rounded-md text-center text-xl"> <i class="fa-solid fa-mobile-screen-button"></i> </div> </div> <div class="text-white flex-1">test</div> </div> </div>