Why does html { font-size: 1rem; } create 1px right border?

I am using Bootstrap 4. I have a navbar etc etc.

In learning about media queries, I discovered a CSS rule, which I am finding useful to drop my overall font size slightly...

html {
  font-size: 0.9rem;
}

The trouble is, when I do this, it seems to introduce a 1px right-hand border/gap to the entire page.

In this animated .gif, you should see the difference between the normal size at font-size: 1rem;(no border) and, on reload, the border appearing when at font-size: 0.9rem;.

enter image description here

To be clear - the border does not appear immediately on load; I need to peek over to the right to reveal it. And, when I do, it stays visible.

Is this normal behaviour? Are there any workarounds?

Update:

I should have posted some code - https://jsfiddle.net/iamrobertandrews/aq9Laaew/266266/

1 answer

  • answered 2018-11-08 09:26 Firoz

    Change the class in footer element p-4 instead of p-3, see below code-

    <footer class="container-fluid bg-dark text-white p-4">
    
    </footer>