Why does the header on IC's blog exceed viewport width?

[Meddysong]

You know when you get an itch and you just can't scratch it? That's me having noticed that the header in IC's blog is exceeding the full page width just a little tiny bit:

It's irritating me because I can't see why it's there. The CSS applying on this element is:

.news-header {
    background-color: #012a40;
    color: #fff;
    text-align: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    margin-bottom: 10px;
}

That width property means that we should be applying 100% of the viewport width ... and yet it's clearly applying a tiny little amount more.

Can somebody scratch this itch for me? Why is the viewport width not being calculated correctly? How would one work around this?

[Meddysong]

I've found the cause of the problem. It's a combination of an element having a width of 100vw and being on Windows.

If a page is longer than the full vertical height, then a scrollbar appears on the right. In Windows, 100vw doesn't take into account that the available space has reduced because the scrollbar is eating some of what was there before. The result is that the width property is larger than it should be, which causes it to exceed the available space slightly. This then generates a needless horizontal scrollbar. This phenomenon doesn't happen on Mac because that behaves sensibly in this scenario.

This person has solved the problem with JS on CodePen. Here's the relevant JS:

function handleWindow() {
  var body = document.querySelector("body");

  if (window.innerWidth > body.clientWidth + 5) {
    body.classList.add("has-scrollbar");
    body.setAttribute(
      "style",
      "--scroll-bar: " + (window.innerWidth - body.clientWidth) + "px"
    );
  } else {
    body.classList.remove("has-scrollbar");
  }
}

handleWindow();

// The resize isn't very necessary:
window.addEventListener("resize", handleWindow);

I've tried to rewrite that using IC's requirements for controllers, and have added that controller to an element on an affected page on my site but it's not working. I'm miserably inexperienced with JS, and so suspect that I'm at fault. Would somebody be so kind as to show me how I should've done it, please?

(And a heads-up to the Mac users at Invision Community, of course, that you have this slight blemish on your blog which you won't be aware of.)