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 ChromeShadcn/React - Landing template
Free Shadcn landing page for React developers
Solution:Jump to 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>...3 Replies
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>
<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
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