How to remove or hide horizontal scroll bar

Issue

My container div adds a scroll bar below my div #wrapper.

This is my css for the wrapper

#wrapper {
   background:#383434;
   width:1000px;
   height:auto !important;
   min-height:100%;
   overflow:hidden;
   height: 100%;
   -moz-box-shadow: 0 2px 15px 5px #000;
   -webkit-box-shadow: 0 2px 15px 5px#000;
   box-shadow: 0px 2px 15px 5px #01DF01;
   margin-top:20px;
   border-radius:5px;
   margin-bottom:50px;
}

How can I remove or hide the scrollbar?

Solution

Deleting/modifying overflow:auto; solves the problem. I think hidden is what you are looking for.

If you look at the documentation you can find what does the different values actually do:

visible
Default value. Content is not clipped, it may be rendered outside the content box.

hidden
The content is clipped and no scrollbars are provided.

scroll
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.

auto
Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.

Answered By - totymedli