The solution provided by @Tulio Castro to add overflow-x: hidden; to the body is a quick fix for the issue at hand. However, it only addresses the visible symptom rather than tackling the root cause of the problem. Understanding the underlying issue can help you improve your code.
Bootstrap is a complex framework that requires careful handling when applying custom styles. To avoid conflicts with Bootstrap's default styling, you need to be mindful of how your styles interact with the framework.
If you want to identify elements causing overflow, you can use this jQuery snippet:
$('*').filter(function() { return $(this).width() > $('body').width(); });
In your scenario, this script may highlight three problematic elements, all of which are .row components:
1) The first .row should be enclosed within a .col-xs-12 element. Nesting a .row directly inside another .row is not recommended in Bootstrap.
2) The second .row is contained within a parent with a class of .partneri, where custom CSS overrides Bootstrap's padding settings. Adjust the CSS as follows:
.parteneri
{
....
padding: 10px;
}
3) Similarly, the third .row nested within a parent with class .sub-footer disrupts Bootstrap's padding. Amend the CSS like so:
.sub-footer
{
border-top: 2px solid #f8f8f8;
padding: 10px 10px 4px 10px;
}
By making these adjustments, you should resolve the overflow issue and ensure smoother compatibility with Bootstrap. Good luck!