I do not believe you are using the bootstrap containers according to their instructions.
For example:
<section id="footer" class="section-padding">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<ul class="list-inline">
<li><a class="footer-a" href="terms.html">Terms of Use</a></li>
<li><a class="footer-a" href="privacy-policy.html">Privacy and Policy</a></li>
</ul>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<p id="copyright">Copyright © 2016. Groupeezz</p>
</div>
</div>
</div>
</div>
</section>
Uniformly indented, it becomes obvious that the second .row
is a child of the first .row
. That’s not how bootstrap does things.
<section id="footer" class="section-padding">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<ul class="list-inline">
<li><a class="footer-a" href="terms.html">Terms of Use</a></li>
<li><a class="footer-a" href="privacy-policy.html">Privacy and Policy</a></li>
</ul>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<p id="copyright">Copyright © 2016. Groupeezz</p>
</div>
</div>
</div>
</div>
</section>
Why is this a big deal?
columns contain horizontal padding; eg:
col-sm-12 {
min-height: 1px;
position: relative;
padding-left: 15px;
padding-right: 15px;
}
a row contains negative horizontal margins; eg:
.row {
margin-left: -15px;
margin-right: -15px;
}
A row
should be a child of a column
. The negative margins in the .row
pull the width of .row
to the same with as the parent column. The available width of the child equals the overall width of the parent.
If one makes a row
the child of another row
, then the child becomes 30px wider than its grandparent column
. In bootstrap, that unexpected width may trigger a horizontal scrollbar. (starting to sound familiar?)
On your page, you have used a bunch of .container
classes. Those .container
classes are the parents of .row
s.
The problem with using the .container
class instead of a col-
umn class is that a .container
is only assigned 12px of horizontal padding by bootstrap.
.container {
padding-left: 12px;
padding-right: 12px;
margin-left: auto;
margin-right: auto;
}
and if one puts a .row
inside that .container
class element, the .row
becomes 6px wider than the parent. That is where your horizontal scrollbar is coming from at narrow widths. That and the .row
as a child of a .row
in the #footer
.
This new perpetual horizontal scrollbar is being triggered by the new .row
and its child .row
that have been added just inside <section id="home">
I don’t know where the .container
class is supposed to be used in bootstrap.
As I said before, I do not recommend pursuing navbars or other content until the page is framed correctly… even if that means learning how to use bootstrap properly first.
If you believe your CSS has problems, the first tool to use is:
https://validator.w3.org/nu/#file
Go ahead, click this link. It’s not as scary as the one in the previous post:
https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ff13-preview.awardspace.net%2Fgroupeezz.dx.am%2Fgroupeezz3%2Fcss%2Fstyle.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
I believe someone will be along in about 6 hours who can evaluate my “findings” and provide definitive guidance about bootstrap for you.
(@PaulOB)
<aside>
previous post introducing this issue:
https://www.sitepoint.com/community/t/bootstrap-file-triggers-horizontal-scrollbar-below-780px/222578
</aside>