I use bootstrap 3 versions. There was an incomprehensible indent on the right.
Maybe someone came across?

Here is the screen:

enter image description here

Here is the link to the full screenshot of the page.

Closed due to the fact that the essence of the question is not clear to the participants of VenZell , Pavel Parshin , user194374, aleksandr barakin , tutankhamun 20 Feb '16 at 11:58 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • 2
    Please attach a piece of your layout where you can reproduce the problem. However, I’m pretty sure that inside you of one of .container-fluid forgotten .row - VenZell
  • hello-site.ru/share/test - Anatoly
  • If you are satisfied with my answer, please mark it as correct. - VenZell

1 answer 1

Having carefully looked at the layout, I realized that the problem is not in it.

The fact is that in Bootstrap from version 3.x to 3.1 there was no class .container-fluid .
I think that's why .row with its negative margins, is pushing your laid out layout wider than you expect. Hence the horizontal scroll bar and extra indent.

Connect the current version of Bootstrap (or at least version 3.1 or .container-fluid ) to use the class .container-fluid or add the following style:

 .container-fluid { margin-left: auto; /* не обязательно */ margin-right: auto; /* не обязательно */ padding-left: 15px; padding-right: 15px; }

to fix the problem you described.

Here is a demonstration of the problem in the Bootstrap version from 3.x to 3.1 :

 .demo { background-color: rgba(65, 180, 135, .3); margin-top: 60px; overflow: auto; padding: 15px; } .container-fluid { background-color: rgba(195, 180, 10, .3); border: 1px solid yellow; line-height: 30px; } 
 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="demo"> <div class="container-fluid"> <div class="row">Некий текст</div> </div> </div>

And since version 3.1, there is no problem:

 .demo { background-color: rgba(65, 180, 135, .3); margin-top: 60px; overflow: auto; padding: 15px; } .container-fluid { background-color: rgba(195, 180, 10, .3); border: 1px solid yellow; line-height: 30px; } 
 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="demo"> <div class="container-fluid"> <div class="row">Некий текст</div> </div> </div>

Update:
After the layout was sent, I see the problem in the following

  • The images inside the slide should have the .img-responsive class. They have a width greater than the width of the wrapper. Now the pictures stretch the layout.
  • For the .right_top_header class, using !important you removed the padding on the left and the right, but you use the .row class .row , which due to a negative margin goes beyond the boundaries of the block and stretches the layout.
  • In the slide, you turned on the buttons next and previous , but did not stylize them. Perhaps after correcting the style of the pictures they will fall into place, but pay attention to them anyway.
  • Unfortunately this is not the case; the latest actual version of the browser is used. Are there any other suggestions? - Anatoly
  • Need an example with styles - VenZell
  • And I was not talking about the browser but about the css library Bootstrap - VenZell
  • @ Anatoly, you need more details about the layout - VenZell
  • drive.google.com/file/d/0B1uWDtcjWlVCWkN3M1kwODhkdzQ/… - Anatoly