Bootstrap - some margin on mobile devices (right side only)

Question

i created a mobile page with initial loading, but for some mobile page there is a stock or addition on mobile devices on the right side, where I can slide. I deleted some code, but even the simplest 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 a test page here: http://wp1011618.server-he.de/projekte/test/index2.html

I have the feeling that col-lg-12 is filling up, but Bootstrap cannot be the intention of Bootstraps, so I wonder what is wrong here?

Thanks!

Answer 1

I understood:

 html, body { overflow-x: hidden; } 

Decided it for me!

Answer 2

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

Answer 3

If you want to set the correct fill in the title of the example, just follow this style in .container , for example: Padding-Right: 12px.

Answer 4

Did you know that your bootstrap.min.js file is not in your js directory? Anyway, the solution just doesn’t use the div “col-lg-12”, will “row” fill 100% of the width so you want it?