css - contents overflowing container in bootstrap 3.0 -

I have this website:

My problem is that when I open a website on my iPhone website Fills the iPhone's screen, but there is some website that has more website compared to the width of the screen, there is a padding that I can not find, there is a background on the top of the website, I do not even know Is that where it's coming from, maybe it's related?

Please tell me, thank you

The problem is that you change the grid classes And padding 0 in the container square left and right grid works in 3 parts and each is necessary. You get the right ingredients in it: containers, rows and columns, it's just that you've made adjustments in the padding breaks of the natural behavior of the grid.

How Grid Works

By default, the container has 15px padding. Row breaks container padding with -15px margin. The column has 15 padding padding, which pulls the material away from the edges of the container and forms a consistent 30 px groove.

The purpose of adding 15px padding which is rejected by the negative line margin seems silly, but it is necessary to allow nesting columns inside other columns! In the picture below, note how the nested columns are shown by the red outline, apply in the enclosed letter without applying extra padding fitted neatly.

In your case, did not Grid has been revised that 10px padding has been dropped in your column classes, 10px negative margin for your line segment and left / right padding 0 on your container class. By setting left and right padding 0 on the container, when your columns fall into a column on Xs breakpoint, there is nothing to remove content from the window / viewport side. Your pole has left 10px / right padding in your single column, but there is a negative margin of 10px in the row, thus expanding everything in the whole width of the viewport. Fix the problem to

fix

and without affecting your current design, you can add a media query that will add only a few padding to the container X X breakpoint: < / P>

  @ media (max-width: 768px) {container {padding-left: 15px; Padding-right: 15px; }}  

This will ensure that your overall design is not unmatched at all other viewport sizes above 768px.

If you want to expand your navigation bar and footer to the full width of the window / viewport, because it is inside a container, you can also add it to the media query to adjust for it Are:

  @ media (max-width: 768 px) {. Container {Padding-left: 15px; Padding-right: 15px; } Nav, footer.row {margin-left: -15px; Margin-right: -15px; }}