Delete horizontal scrollbar

Question

i've this single page made with bootstrap http://www.grisard.ch/uferstrasse/imfoyeru90/

what i need is to remove the horizontal scrolling. I think that the code is okay. Thi is the HTML and the CSS:

HTML:

<div class="container-fluid">
                         <div class="row fluid">

                            <div class="col-md-6 simona">
                               <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
                  <!-- Indicators -->

                  <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                  </ol>
                  <div class="carousel-inner">
                    <div class="item active"> <img src="img/simona.jpg" style="width:100%" alt="First slide">

                    </div>
                    <div class="item"> <img src="img/simona2.jpg" style="width:100%" data-src="" alt="Second    slide">

                    </div>
                    <div class="item"> <img src="img/simona3.jpg" style="width:100%" data-src="" alt="Third slide">

                    </div>
                  </div>
                  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> 
                            </div>

                            <div class="col-md-6 logo">
                              <img class="img-responsive" src="img/logo.png" />  
                            </div>


                             <div class="col-md-6 date">

                              <h3><br>
                                    Uferstrasse 90, 4057 Basel</h3>
                                <h5 class="date">28.10.2015 &#x2013 09.12.2015 </h5>   

                            </div>

                                    <div class="row">
                                    <div class="col-md-6">    
                        <div class="col-md-3 dates"><p><strong></b>Vernissage:</strong><br>26.10.2015<br>18.00–20.00 Uhr</p></div>
                        <div class="col-md-3 dates"><p><strong>Lesung:</strong><br>16.11.2015<br>18.00 Uhr</p></div>
                        <div class="col-md-3 dates"><p><strong>Finissage:</strong><br>07.12.2015<br>18.00–20.00 Uhr</p></div>
                            <div class="col-md-8"> <p class="bio">Bild eins: «unsagbar» 
                aus dem Zyklus «Ahnengalerie»

                Raffaello hat sie geküsst
                Leonardo war beim Vesper 
                zugegen. Hinter dem Vorhang kommt sie auf eine neue Idee.
                Sie könnte als Skulptur leben. 

                In meiner Malerei geht es um 
                Formen von Lebenserfahrungen.

                Um die Sehnsucht, das Unsagbare darstellen zu können. Und um die Unerträglichkeit, dafür niemals erlösende Bilder zu finden. 

                Was geschieht - ich lasse mich ins Unterbewusstsein fallen und finde Fragmente.

                Künstlerin:
                                Simona Deflorin.</p></div> 

                        </div>
                        </div>




                </div>
                 </div>

CSS:

            .col-md-6 {  }

        .col-md-4 {  }

        .date { margin-top: 15px; }

        .col-md-2 { }

        .logo { padding-top: 15px; }

        .simona { padding-top: 15px; } 

        .col-md-8 { padding-left: 0 !important; }

        .simo { padding-left: 0 !important; top: 15px; }

        .dates { padding-left: 0 !important; }

        .date { font-size: 1.645em; }

        .bio { margin-top: 15px; }

        @media only screen 
          and (min-device-width: 320px) 
          and (max-device-width: 480px)
          and (-webkit-min-device-pixel-ratio: 2) {
              .dates { padding-left: 15px !important; }
              .bio { padding-left: 15px !important; }
        }

        @media only screen 
        and (min-device-width : 768px) 
        and (max-device-width : 1024px)  { 
            .dates { padding-left: 15px !important; }
              .bio { padding-left: 15px !important; }

        }

Answer 1

There is an issue with markup.. rows and columns are not properly arranged on right panel. When I saw your link with firebug.. I found on right panel rows and columns are not properly arranged. Please review it. Fixing this will solve you issue. Just tested the same with firebug. Also you are using two versions of bootstrap. Use just the latest one.

Answer 2

You can remove the horizontal scrollbar using overflow-x:hidden; but this is not a good practice, the problem with your website is margin-right and margin-left -15px; you can remove this horizontal scrollbar by removing "row and fluid" class,here I made a GIF to show the problem and its solution.

Answer 3

The horizontal scrollbar appears because your content is too wide for screen. Check with the width's of your elements. A quicker solution is to just limit your body's width and scrollbar would be gone.

body { width: 98% } works alright in your case. You can also use body { overflow-x : hidden} and just hide the scrollbar if you're sure you don't have content that needs to be accessed by scrolling horizontally.

Answer 4

you should add this to body style :

 overflow: hidden;