Bootstrap - Some kind of margin on mobile devices

Question

i created a mobile page with bootstrap, but for some kind the mobile page has a margin or padding on mobile devices on the right side where i can slide to. I deleted some code, but even the most simple structure has it:

    <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="navigation"></div>
          </div>
        </div>
    </div><!--container-->

.container {
  max-width:100%;
  padding:0;
  height: 100%;
  width:100%;
}

.navigation {
  height:3.4375em;
  line-height:1em;
  background-color:#E75200;
}

I uploaded the test page here: http://wp1011618.server-he.de/projekte/test/index2.html

I have the feeling that it is because of the col-lg-12 padding, but Bootstrap this can't be Bootstraps intention so I am wondering whats wrong here?

Thanks!

Answer 1

I figured it out:

html, body {
  overflow-x: hidden;
}

Solved it for me!

Answer 2

Do you know you don't have bootstrap.min.js file in your js directory? Anyway, the solution is just don't use "col-lg-12" div, "row" will fill 100% of width so why you want this one?

Answer 3

If you want to set the right-padding on your example header, then just do that style in .container for example: Padding-Right:12px.

Answer 4

.col-lg-12 class has padding-right: 15px; and padding-left: 15px;, that causes white spaces. Make them 0, than remove margin-right: -15px; and margin-left: -15px; in .row class.