bootstrap mobile horizontal overflow problem

I have been using bootstrap for a while now. its really nice to have this kind of a tool for mobile ready and have responsive design. it means you can write your html one time and it will work on all platforms. you dont need to write for mobile and desktop different. anyway after I write some site in bootstrap I had a small overflow problem. the site has horizontal scroll when its loaded in my smartphone.

it is a normal bootstrap html site having simple div rows and some links in it. having the row oversizing the container was frustrating. because I did not have any special html tricks or etc.

after some research I found the answer is about css.

this site explains a little https://css-tricks.com/findingfixing-unintended-body-overflow/

solution is the use offcanvas.css. just adding css solved my problem. you can find it here

http://getbootstrap.com/examples/offcanvas/offcanvas.css