Horizontal scroll bar tailwind

Can someone explain why I'm getting a small horizontal scrollbar on this page (not my project) when the viewport is anything but maximized, so any kind of resized window I'm seeing it, just hard to understand cause, narrowed it down to the <nav /> section https://shadcn-landing-page.vercel.app/ testing on Chrome
Shadcn/React - Landing template
Free Shadcn landing page for React developers
Solution:
There are two elements causing the horizontal scrollbar: <ul data-orientation="horizontal" class="group flex-1 list-none items-center space-x-1 container h-14 px-4 w-screen flex justify-between" dir="ltr"> The w-screen is causing it within the <header>...
Jump to solution
3 Replies
Solution
Juice Weasel
Juice Weaselβ€’7mo ago
There are two elements causing the horizontal scrollbar: <ul data-orientation="horizontal" class="group flex-1 list-none items-center space-x-1 container h-14 px-4 w-screen flex justify-between" dir="ltr"> The w-screen is causing it within the <header> <section class="container grid lg:grid-cols-2 place-items-center py-20 md:py-32 gap-10"> This is also causing it just below the <header>. It's most likely the grid here.
π•Ύπ–Žπ–‘π–›π–Šπ–— π•Ύπ–™π–Šπ–Šπ–‘
My first assumption is that you might've forgotten css resets, thus header is taking more space via its native margin
Gaz
Gazβ€’7mo ago
hey guys, thanks for the replies, it's not my project, I was just confused why it was happening, thanks for the explanation, I'll mark as solved
Want results from more Discord servers?
Add your server