Initially, the resolution perfectly matched the width of mobile devices. However, after changing the background image, for some reason, the width no longer fits the device length precisely. I've tried resetting to a point where the resolution was fine, but it still doesn't work.
EDIT:
As you can see in my screenshot, there is white space on the right side of the screen that I'm trying to remove.
https://i.stack.imgur.com/BiIMZ.png
https://i.stack.imgur.com/AXhv3.jpg
https://i.stack.imgur.com/tz8JC.png
It seems to be unrelated to margin or padding as the HTML entity itself does not extend to the full width of the device
Can anyone assist with this? I am prepared to provide more information if necessary
Here's my index file
{% load static %}
<!DOCTYPE html>
<html lang="en">
<!-- The rest of the code follows -->
This is the content of my style.css file:
@import url("https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900");
body {
font-family: "Raleway", sans-serif;
font-size: 1.2em;
color: #707070;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* Rest of the CSS styles continue */