How to remove long horizontal scrollbar from HTML page

Question

I am starting one project using twitter bootstrap, however I got one issue. There is a long empty scrollbar horizontally. I can't find the problem, does anyone knows whats the problem?

Thanks

Answer 1

<style>
body {
  overflow-x: hidden !important;
}
body > * {
  max-width: 100% !important;
}
</style>

Answer 2

media="all"
style.css:1@media (min-width: 1200px)

.container, 
.navbar-static-top .container, 
.navbar-fixed-top .container, 
.navbar-fixed-bottom .container {
    width: 1270px;
}

change to

.container, 
.navbar-static-top .container,
.navbar-fixed-top .container, 
.navbar-fixed-bottom .container {
    width:auto;
}

Or remove the container class on your map on bottom, container is used to wrap the content and shouldn't be wrapped into an other container. Also container will take full width.

Place one anywhere within a .container, which sets the width of your site and content.

'bootstrap doc'

Check out the templates

Answer 3

Hope this helps !!

1) Add the following in header to enable responsive feature

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2) If you are using Container fluid

make proper use of row-fluid and span like:

<div class="container-fluid">
<div class="row-fluid">
    <div class="span2">
        <!--Sidebar content-->
    </div>
    <div class="span10">
        <!--Body content-->
    </div>
</div>

there may be some tag error here ..

3) forgot to add overflow-x hidden to body.

body {
    overflow-x: hidden;
}

LINK