Unnecessary Horizontal Scrollbar on Website

[AntonCSalvador]

Title: Unnecessary Horizontal Scrollbar on Website

Description: There is an unwanted horizontal scrollbar appearing at the bottom of the BytesOfLove website. This scrollbar is not intended and disrupts the user experience by allowing scrolling horizontally when there should be no additional content outside the viewport.

Steps to Reproduce:

1. Open the BytesOfLove website in any modern web browser (e.g., Chrome, Firefox, Edge).
2. Observe the appearance of a horizontal scrollbar at the bottom of the page.
3. Attempt to scroll horizontally to notice that there is no content outside the viewport.

Expected Behavior: The website should not display a horizontal scrollbar if all content is within the viewport. The page should fit perfectly within the width of the screen without the need for horizontal scrolling.

Actual Behavior: An unnecessary horizontal scrollbar is displayed at the bottom of the website, allowing horizontal scrolling even though all content should be within the viewport.

Possible Cause: The issue might be caused by an element or container on the page that has a width larger than the viewport or a CSS property like overflow-x set to scroll or auto. Another potential cause could be a margin or padding issue that exceeds the viewport's width.

Proposed Solution:

• Investigate and identify the element or container that is causing the overflow.
• Adjust the CSS to ensure that the width of all elements fits within the viewport. Consider using properties like max-width: 100%; or setting overflow-x: hidden; on the body or html elements if appropriate.

Browser/Device:

• Please test on multiple browsers and viewports using inspect element.

Screenshots: refer to where the arrow is pointing.

[Akshaydotcom]

Hi! Can I work on this? @AntonCSalvador