I'm puzzled by the appearance of a horizontal scroll bar on my webpage and I can't seem to pinpoint the exact cause. I've tried simplifying the page as much as possible, but there still seems to be an issue. Here's all the information I believe is pertinent.
If there are any additional details I should include, please do let me know. Is there a method that allows the browser to generate a single CSS file containing all the relevant styles for the page? It would be convenient to have a consolidated CSS file along with the rendered HTML.
The webpage consists primarily of an <h3> heading and a form with just one input control. I've given the form a blue border to indicate that the form itself is not causing the scroll bar. Here's the webpage with the scroll appearing on the left side.
https://i.sstatic.net/27miD.png
And here it is fully scrolled to the right
https://i.sstatic.net/pcUNK.png
Upon inspection, it's evident that the form spans the width of the browser, eliminating the form itself as the probable cause of the scroll bar. However, I couldn't identify any right margin being added to the form that would trigger the scroll bar. There is certainly no left margin applied to the form.
Below is the raw HTML code (viewed through the browser's page source):
<!DOCTYPE html>
<html lang="en">
... (HTML code continues)
Here's the computed CSS for <body>
https://i.sstatic.net/kodvu.png
And for <main>
https://i.sstatic.net/F0ooR.png
And for
<div class="my-main-scrollbar">https://i.sstatic.net/bMQ8R.png
And for the form
https://i.sstatic.net/E1uFc.png
I've been unable to trace the source of this slight amount of added width. However, here's something strange - when the EditForm's width is set to 99%, the scroll bar disappears. So, something is indeed being added to the right of the form. But what could it be?