CSS
How to Remove Horizontal Scrollbar in CSS?
A horizontal scrollbar can appear in a web page due to various reasons, such as overflowing content, improper width settings, or unintended margins. While sometimes it’s necessary, in most cases, it negatively affects the user experience.
In this blog, we will explore different methods to remove the horizontal scrollbar in CSS and ensure a smooth, responsive design.
1. Why Does a Horizontal Scrollbar Appear?
A horizontal scrollbar can appear due to:
✅ Content overflow beyond the viewport width.
✅ Fixed width elements wider than the parent container.
✅ Unintentional margins or paddings causing content to expand.
✅ Improper use of width properties like vw or px.
2. Methods to Remove Horizontal Scrollbar in CSS
Method 1: Use overflow-x: hidden;
The easiest way to hide the horizontal scrollbar is by applying overflow-x: hidden; to the <body> or a specific container.
body {
overflow-x: hidden;
}
✅ This prevents content from overflowing horizontally and hides the scrollbar.
Method 2: Set max-width: 100%; for Elements
Ensure that elements do not exceed the viewport width by using max-width: 100%.
img, video {
max-width: 100%;
height: auto;
}
✅ This prevents images and videos from stretching beyond their container, avoiding horizontal scrolling.
Method 3: Use box-sizing: border-box;
By default, width does not include padding and borders. Setting box-sizing: border-box; ensures padding and borders are included within the total width.
* {
box-sizing: border-box;
}
✅ This prevents unintended overflow caused by padding and margins.
Method 4: Set width: 100vw; Carefully
Sometimes, using width: 100vw; can cause scrollbars because vw includes the scrollbar width. Instead, use width: 100%;.
.container {
width: 100%;
}
✅ This ensures that the container fits within the viewport without extra width.
Method 5: Check for Negative Margins or Large Padding
Negative margins and excessive padding can cause elements to overflow.
.container {
margin-left: -20px; /* Avoid large negative margins */
padding-right: 50px; /* Reduce excessive padding */
}
✅ Adjust margins and padding to prevent unwanted overflow.
Method 6: Use display: flex; with flex-wrap: wrap;
If you are using display: flex;, ensure that child elements wrap instead of forcing a horizontal scroll.
.flex-container {
display: flex;
flex-wrap: wrap;
}
✅ This ensures that elements break into a new row instead of overflowing horizontally.
Method 7: Inspect Elements in Developer Tools
- Right-click on your webpage and select Inspect (DevTools).
- Navigate to the Elements tab and look for elements exceeding the viewport.
- Identify the CSS rules causing overflow and adjust them accordingly.
3. Final Solution: Combine Methods for a Scroll-Free Page
For best results, use a combination of the methods above:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
.container {
width: 100%;
max-width: 100vw;
}
img, video {
max-width: 100%;
height: auto;
}
Conclusion
To remove the horizontal scrollbar in CSS:
✔️ Use overflow-x: hidden; to hide scrolling.
✔️ Ensure elements have max-width: 100%;.
✔️ Apply box-sizing: border-box; to prevent unexpected widths.
✔️ Be cautious with width: 100vw;.
✔️ Use flex-wrap: wrap; for flex containers.
✔️ Inspect elements using DevTools to find and fix overflow issues.