I have a website that uses responsive CSS, including media queries at 768px, 480px, and 320px. However, when I resize the screen below 1040px, I notice some extra space appearing on the right margin of the entire page and I'm struggling to identify the source of this issue. The website is built on WordPress. Here is the link to the JSFiddle for reference.
Below is a snippet of the relevant CSS:
body,
html {
height: 100%;
width: 100%;
margin-left: -.01em;
}
body {
font-family: "ff-dagny-web-pro", sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 22px;
color: black;
}
#main {
margin: 0 15%;
}
@media only screen and (max-width: 768px) {
#main {
margin: 0 10% 0 10%;
}
}
@media only screen and (max-width: 480px) {
#main {
margin: 0 5% 0 5%;
}
}
#content {
float: left;
width: 68%;
}
@media only screen and (max-width: 480px) {
#content {
width: 100%;
}
}
Thank you in advance for any assistance!