I've encountered an issue with my website where there's a white space on the right side of the page, causing horizontal scrolling. I attempted to resolve this by adding overflow: hidden to the CSS, which worked perfectly in Chrome. However, the problem resurfaced when viewed in Safari or on mobile devices.
You can view a screenshot of the website here.
Here's a snippet of my HTML:
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'web/style.css' %}">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Eximia Denim Co.</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent fixed-top">
<div class="container">
<a class="navbar-brand" href="{% url 'web:index' %}" id="brand-name">Eximia Denim Co.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Rest of the HTML code continues... -->
And here's the relevant CSS code in my style.css:
/* CSS styles */
If anyone has any insights or suggestions, I would greatly appreciate the help. Thank you!
Update: I managed to resolve the issue by adding the following CSS rule to my style.css:
* {
overflow-x: hidden;
}