I have been working on creating a replica of Watch2Gether, and it looks great on medium and large screens. However, when viewed on a phone, everything seems perfect until you scroll to the left and notice a large white space on the right side. I've experimented with changing margins and paddings on some elements to improve the user interface, but there remains a significant white space when scrolling that diminishes the overall look. Any suggestions on how to address this issue?
https://i.sstatic.net/sXfFz.png
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
...
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="client.js"></script>
<script src="users.js"></script>
<%- include('partials/footer') %>
CSS:
...