Why Are Horizontal Scroll Bars Shown on My Website

Why is a horizontal scroll bar appearing if none of the elements are wider than the 960px container?

Try add overflow hidden:

#main_wrap{
    margin:0 auto;
    width:960px;
    position:relative;
    overflow: hidden;
}

That should work (but is hacky).

Why are horizontal scroll bars shown on my website?

Note that you have your <p> elements relatively positioned and shifted right with right: -450px.

With position: relative the original space for the element is reserved. So while you're shifting the element rightward 450px, its original space in the layout is kept intact, and the document is lengthened horizontally. That's the reason for the scrollbar.

Sample Image

Remove or adjust the right: -450px rule to see the difference.

Also, simply for contrast, switch relative with absolute positioning, which removes the element from the document flow, and the original space is eliminated.

Why is there a horizontal scrollbar on my website?

#one {
 width: 100%;
}

#two {
 width: 100%;
}

Why Web Page is showing a horizontal scroll bar even it fits on the screen

Remove margin-left and margin-right for .row and it well be fixed.

Why has my website got a horizontal scroll bar?

Instead of putting left: 28% for your div, use padding-left: 28%. It should be a little fix.

Why do I have scroll bars on my website when there shouldn't be?

It's this combination

position: relative;
left: 24.5%;
display: flex;

You've got a block level box, that's margin area is therefore as wide as its container, then it's shifted 24.5% of the width of its container to the right, making its right edge 124.5% from the container's left edge. That's always going to overflow the container horizontally.

I suggest using margin-left instead of left.

Why does a horizontal scroll-bar appear when adding small div below HTML Canvas?

This is unrelated to <canvas> and the behavior is the same with any other block element such as a <div>.

If you set the lone element in the <body>'s dimensions to innerWidth/innerHeight and the parent <body> has no padding or margin, then you've used up exactly all of the space on the page and no scrollbars are necessary.

If you add a <div> below your full-page element, a vertical scrollbar becomes necessary to allow the user to move the viewport down to see it. But this new vertical scrollbar now takes up some horizontal space that is ignored by innerWidth, as the docs state:

innerWidth returns the interior width of the window in pixels. This includes the width of the vertical scroll bar, if one is present.

The original element set to exactly innerWidth pixels now overflows the screen horizontally by the width of the vertical scrollbar. Therefore, a horizontal scrollbar becomes necessary.

An option you can try is document.documentElement.clientWidth. As the docs state:

clientWidth [...] includes padding but excludes borders, margins, and vertical scrollbars (if present).

(you might need to click 'full page' after running the snippet to see the difference):

const canvas = document.getElementById("main-canvas");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
window.addEventListener("resize", // TODO debounce
  function () {
    canvas.width = document.documentElement.clientWidth;
    canvas.height = document.documentElement.clientHeight;  
  }
);

body {
  background-color: red;
  margin: 0;
  padding: 0;
}

#main-canvas {
  display: block;
  background-color: blue;
}

#info {
  width: 50px;
  height: 50px;
  background-color: green;
}

<canvas id="main-canvas"></canvas>
<div id="info"></div>