Scroll bars are used to change the positioning of the content displayed in the application window, most often the document page. By default, they appear automatically when the width or height of the window is not sufficient to display the entire open page. Therefore, to get rid of the horizontal scroll bar, you need to change the width of either the page or the application window in which it is open.
Instructions
Step 1
Zoom out on the page - this is the easiest way to remove the horizontal scroll bar when viewing the page. In any browser, this can be done by rolling the mouse wheel towards you while holding down the ctrl key. Many text editors (for example, Microsoft Word) also support such page zoom control. In browsers, you can also use the minus key instead of the mouse. Each click or turn of the wheel one stop will zoom out 10% until the horizontal size is large enough to display the page without a horizontal scroll bar.
Step 2
Use the browser's ability to tamper with the source code of a web page and change the display styles specified in it to match the width of the window - some web browsers have this option. For example, in the Opera browser, you just need to click on the "Fit to Width" icon and the horizontal scroll bar will disappear, and the columns of the viewed page will change their sizes. If it becomes necessary to return to the page layout specified by the creator, click this icon again.
Step 3
When creating web pages, use the CSS overflow-x property to forcibly disable horizontal scrolling of the entire page or its individual block elements. This property has been introduced in CSS since version 3.0 and is supported by all modern browsers. The values that can be assigned to it are auto, hidden, scroll, visible. If this property is not specified in the style descriptions, then it is considered to have the value auto, that is, horizontal scrolling should appear when the content does not fit into the width of the element. To disable scrolling in absolutely all cases, use the hidden value. For example:
body {overflow-x: hidden;}
